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教程
Jun 09 Javascript
最简单的jQuery程序 入门者学习
Jul 09 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
深入理解js promise chain
May 05 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
vue-cli webpack配置文件分析
May 20 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
第二节--PHP5 的对象模型
2006/11/16 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
PHP精确计算功能示例
2016/11/29 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
团员的自我评价
2013/12/01 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
爱与责任演讲稿
2014/05/20 职场文书
村党支部书记承诺书
2014/05/29 职场文书
临时用工协议书范本
2014/10/29 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android