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 相关文章推荐
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
深入浅析react native es6语法
Dec 09 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
js中this对象用法分析
Jan 05 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 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中用正则表达式清除字符串的空白
2011/01/17 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
详解js 创建对象的几种方法
2019/03/08 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
Python实现进程同步和通信的方法
2018/01/02 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python实现飞行棋游戏
2020/02/05 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
《在山的那边》教学反思
2014/02/23 职场文书
促销活动总结怎么写
2014/06/25 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL