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 创建对象
Jul 17 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
js propertychange和oninput事件
Sep 28 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
深入了解JavaScript 私有化
May 30 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
Vue+TypeScript中处理computed方式
Apr 02 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
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
Python入门篇之条件、循环
2014/10/17 Python
Python序列操作之进阶篇
2016/12/08 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python类的实例化问题解决
2019/08/31 Python
用python实现学生管理系统
2020/07/24 Python
python 实现表情识别
2020/11/21 Python
python代码实现图书管理系统
2020/11/30 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
商务英语本科生的自我评价分享
2013/11/15 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
学校后勤人员职责
2013/12/27 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
动员大会主持词
2014/03/20 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
逃课检讨书范文
2015/05/06 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
小学语文教学反思范文
2016/03/03 职场文书