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实现table鼠标经过变色代码
Sep 25 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
python中__slots__用法实例
2015/06/04 Python
python读取LMDB中图像的方法
2018/07/02 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
Ref与out有什么不同
2012/11/24 面试题
土木工程专业个人求职信
2013/12/30 职场文书
高一学生期末评语
2014/04/25 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
安全隐患整改报告
2014/11/06 职场文书
学校端午节活动总结
2015/02/11 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫