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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
上课说话检讨书大全
2014/01/22 职场文书
服务质量承诺书
2014/03/27 职场文书
施工安全责任书
2014/04/14 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书