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 相关文章推荐
实现只能输入数字的input不用replace方法
Sep 12 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP浮点数精度问题汇总
2015/05/13 PHP
简单实现PHP留言板功能
2016/12/21 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
python关键字and和or用法实例
2015/05/28 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
人力资源管理专业应届生求职信
2013/09/28 职场文书
学校消防安全制度
2014/01/30 职场文书
项目负责人任命书
2014/06/04 职场文书
应届生求职信范文
2014/06/30 职场文书
管理工程专业求职信
2014/08/10 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
python模板入门教程之flask Jinja
2022/04/11 Python