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 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
jQuery+ajax实现文件上传功能
Dec 22 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
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
javascript 树形导航菜单实例代码
2013/08/13 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python中操作符重载用法分析
2016/04/29 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
Python中协程用法代码详解
2018/02/10 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Europcar比利时:租车
2019/08/26 全球购物
银行实习生的自我评价
2013/12/09 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
优秀干部获奖感言
2014/01/31 职场文书
军训考核自我鉴定
2014/02/13 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB