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 相关文章推荐
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
JS正则表达式封装与使用操作示例
May 15 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
用JS实现飞机大战小游戏
Jun 09 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中调用JAVA
2006/10/09 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
php函数与传递参数实例分析
2014/11/15 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
tab栏切换原理
2017/03/22 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
对Python 语音识别框架详解
2018/12/24 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python实现简单银行管理系统
2019/10/25 Python
Python 下载及安装详细步骤
2019/11/04 Python
浅析Django中关于session的使用
2019/12/30 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
预备党员转正思想汇报
2014/01/12 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
环保建议书300字
2014/05/14 职场文书
活动简报范文
2015/07/22 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
MySQL数据库 安全管理
2022/05/06 MySQL