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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
ES6中的类(Class)示例详解
Dec 09 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流量统计功能的实现代码
2012/09/29 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
python os.path模块常用方法实例详解
2018/09/16 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
python设置环境变量的作用整理
2020/02/17 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
python中round函数如何使用
2020/06/19 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
C面试题
2015/10/08 面试题
护理专业自荐信
2013/12/03 职场文书
九年级体育教学反思
2014/01/23 职场文书
音乐教学反思
2014/02/02 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
操行评语大全
2014/04/30 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS