jquery html5 视频播放控制代码_jquery

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>

下载地址:http://www.jb51.net/jiaoben/32245.html

jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto插件) jPlayer可以让你迅速编写一个跨平台的支持音频和视频播放的网页. jPlayer的丰富API可以让你创建一个个性化多媒体应用,因此也获得越来越多的社区成员的支持和鼓励。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, html5
视频播放
jquery输出html代码、jquery拼接html代码、jquery获取html代码、jquery控制video播放、jquery控制audio播放,以便于您获取更多的相关知识。

时间: 2024-09-30 04:29:44

jquery html5 视频播放控制代码_jquery的相关文章

jQuery+HTML5加入购物车代码分享_jquery

这是一款基于jquery+html5实现的支持累加计价的网站购物车代码,可以把货物添加到购物车,添加物品数量,如果想取消购置某物品,这个功能也是可以实现的. 运行效果图:-----------------------------------查看效果----------------------------------- 为大家分享的jQuery+HTML5加入购物车代码如下 <head lang="en"> <meta charset="UTF-8"

自制轻量级仿jQuery.boxy对话框插件代码_jquery

对此,jquery.boxy插件已经做得非常强大了,常用的提示.确认,拖拽.改变大小.异步加载都非常实用,导致文件较大(可忽略不计),很多功能并不需要,为此,抱着在边学边实践的态度和想法,自制一款适用于本项目的轻量级弹出层插件,这是第一次写jqeury插件,也为了以后能将常用操作封装为jquery插件做准备吧. 首先来个插件名字,这样才能去唬人,就叫jquey.cvbox.min.js吧,cv就是网站域名ChinaValue的缩写,压缩后的容量控制在6K以下.因为还未完成,所以先将思想记录下来.

jQuery 浮动广告实现代码_jquery

实现方法: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>浮动广

Jquery焦点图实例代码_jquery

本文实例讲述了Jquery焦点图实例代码.分享给大家供大家参考.具体如下: 对于很多建站的朋友来讲,焦点图并不陌生,一般的企业站,门户站都会用到焦点图.我们平时在写html代码的时候,很多人为了省时省力,对于焦点图都是在网上下载一些人家写好的代码,直接套上去即可,很多时候我自己也是这样来的.因为一个焦点图有html布局,css样式调试和最关键的 javascript语句的编写.这些都是一个很麻烦的过程. 今天我就以实例讲解,手把手教你如何写Jquery焦点图.Jquery是js封装的框架,让js

jQuery自定义数值抽奖活动代码_jquery

本文实例为大家分享了jquery输入数字随机抽奖特效代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - 何问起</title><base target="_blank" /> <script type="text/ja

基于JQUERY的多级联动代码_jquery

jquery.select.more.js 复制代码 代码如下: (function($){ $.fn.doselectmore = function(settings) { var dfop ={ namekey: "name", pnamekey: "name", idkey: "id", selectname:"sel", method: "POST", datatype: "json&qu

jQuery 页面 Mask实现代码_jquery

在 Ajax 应用中,显示一个 Dialog(以 Div 方式显示)前,都会先建一个 Mask.因为经常会用到,所以写成了一个 jQuery 插件,方便自己的使用. 复制代码 代码如下: (function($){ $.extend({ documentMask: function(options){ // 扩展参数 var op = $.extend({ opacity: 0.8, z: 10000, bgcolor: '#000' }, options); // 创建一个 Mask 层,追加

jquery实现滑动特效代码_jquery

在项目中,有需求要使用jquery实现滑动效果,于是把相关内容整理如下,下文介绍了很详细,有文字说明和代码分析,需要的朋友可以来学习下. 实现方式一:  .slideUp([duration][,complete])--目标元素向上滑入隐藏: .slideDown([duration][,complete])--目标元素向下滑出显示: .slideToggle([duration][,complete])--目标元素隐藏则向下滑出显示,否则向上滑入隐藏:注:duration为方法执行的时间区间,

jQuery遍历Form示例代码_jquery

jQuery 遍历 Form,代码如下 复制代码 代码如下: <script type="text/javascript"> // 取得 id 为form1 的 form 的所有输入变量 values = $("#form1").serializeArray(); var values, index; for (index = 0; index < values.length; ++index) { if (values[index].name =