jquery html5 视频播放控制代码


Posted in Javascript onNovember 06, 2016

jQuery HTML5 视频播放控制核心代码:

<video class="pause" controls poster="images/vedio.jpg" width="663" height="373">
      <source src="video/Defone3.8_1.mp4" type="video/mp4">
      您的浏览器不支持html5!
</video> 
<script type="text/javascript">
    $('video').click(function() {
      if ($(this).hasClass('pause') ) {
        $("video").trigger("play");
        $(this).removeClass('pause');
        $(this).addClass('play');
      } else {
        $("video").trigger("pause");
        $(this).removeClass('play');
        $(this).addClass('pause');
      }
    });
</script>

如果想正式用户播放环境,建议大家使用jplayer之类的工具

<script type="text/javascript" src="../../lib/jquery.min.js"></script>
<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

	$("#jquery_jplayer_1").jPlayer({
		ready: function (event) {
			$(this).jPlayer("setMedia", {
				title: "Bubble",
				m4a: "http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
				oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
			});
		},
		swfPath: "../../dist/jplayer",
		supplied: "m4a, oga",
		wmode: "window",
		useStateClassSkin: true,
		autoBlur: false,
		smoothPlayBar: true,
		keyEnabled: true,
		remainingDuration: true,
		toggleDuration: true
	});
});
//]]>
</script>

下载地址:https://3water.com/jiaoben/32245.html

jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto插件) jPlayer可以让你迅速编写一个跨平台的支持音频和视频播放的网页. jPlayer的丰富API可以让你创建一个个性化多媒体应用,因此也获得越来越多的社区成员的支持和鼓励。

Javascript 相关文章推荐
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 #Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 #Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 #Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 #Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 #Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 #Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 #Javascript
You might like
PHP模板引擎SMARTY
2006/10/09 PHP
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python读写docx文件的方法
2018/05/08 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
幼儿园小班植树节活动方案
2014/03/04 职场文书
入党自我鉴定
2014/03/25 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
道歉信范文
2015/05/12 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL
Nginx利用Logrotate实现日志分割
2022/05/20 Servers