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 相关文章推荐
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 Javascript
Javascript Worker子线程代码实例
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的FTP学习(四)
2006/10/09 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
js单例模式的两种方案
2013/10/22 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python查找相似单词的方法
2015/03/05 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
django 单表操作实例详解
2019/07/30 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
python跨文件使用全局变量的实现
2020/11/17 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
linux系统都有哪些运行级别
2016/03/26 面试题
《忆江南》教学反思
2014/04/07 职场文书
实习报告评语
2014/04/26 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL