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 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
jquery高效反选具体实现
May 05 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
js性能优化技巧
Nov 29 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
react-router实现按需加载
May 09 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
PHP版 汉字转码的实现详解
2013/06/09 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
js分页工具实例
2015/01/28 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
详解Python中的array数组模块相关使用
2016/07/05 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
abstract class和interface有什么区别?
2012/01/03 面试题
校长岗位职责
2013/11/26 职场文书
学校七一活动方案
2014/01/19 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
满月酒邀请函
2015/01/30 职场文书
毕业生政审意见范文
2015/06/04 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
KTV员工管理制度
2015/08/06 职场文书