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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 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
php flush类输出缓冲剖析
2008/10/19 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
教师党员公开承诺书
2014/03/25 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
博物馆观后感
2015/06/05 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS