jquery html5 視頻播放控制代碼

更新時(shí)間：2016年11月06日 18:11:38 投稿：mdxy-dxy

這篇文章主要介紹了jquery html5 視頻播放控制代碼,需要的朋友可以參考下

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>

如果想正式用戶播放環(huán)境，建議大家使用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.dhdzp.com/jiaoben/32245.html

jPlayer是一個(gè)JavaScript寫的完全免費(fèi)和開(kāi)源 (MIT) 的jQuery多媒體庫(kù)插件 (現(xiàn)在也是一個(gè)Zepto插件) jPlayer可以讓你迅速編寫一個(gè)跨平臺(tái)的支持音頻和視頻播放的網(wǎng)頁(yè). jPlayer的豐富API可以讓你創(chuàng)建一個(gè)個(gè)性化多媒體應(yīng)用，因此也獲得越來(lái)越多的社區(qū)成員的支持和鼓勵(lì)。

您可能感興趣的文章:

相關(guān)文章

jquery 圖片上傳按比例預(yù)覽插件集合
上傳的時(shí)候可以生成固定寬高范圍內(nèi)的等比例縮放圖的代碼，需要的朋友可以參考下。
2011-05-05
jQuery的框架介紹
jQuery使用有一段時(shí)間了，但是有一些API的實(shí)現(xiàn)實(shí)在想不通。小編參考相關(guān)資料源碼，現(xiàn)在把我的學(xué)習(xí)過(guò)程和收獲分享給大家
2016-05-05
實(shí)例詳解jQuery的鏈?zhǔn)骄幊田L(fēng)格
jQuery中的鏈?zhǔn)讲僮?，它讓代碼變得更有層次更簡(jiǎn)潔，所以這篇文章主要給大家介紹了關(guān)于jQuery鏈?zhǔn)骄幊田L(fēng)格的相關(guān)資料,需要的朋友可以參考下
2021-06-06
jquery制作的移動(dòng)端購(gòu)物車效果完整示例
這篇文章主要介紹了jquery制作的移動(dòng)端購(gòu)物車效果,結(jié)合完整實(shí)例形式詳細(xì)分析了jQuery移動(dòng)端購(gòu)物車具體功能實(shí)現(xiàn)、數(shù)值計(jì)算、界面布局與顯示效果相關(guān)操作技巧,需要的朋友可以參考下
2020-02-02
基于jQuery實(shí)現(xiàn)的菜單切換效果
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的菜單切換效果，需要的朋友可以參考下
2015-10-10
jQuery實(shí)現(xiàn)加入購(gòu)物車飛入動(dòng)畫(huà)效果
當(dāng)您在電商購(gòu)物網(wǎng)站瀏覽中意的商品時(shí)，您可以點(diǎn)擊頁(yè)面中的“加入購(gòu)物車”按鈕即可將商品加入的購(gòu)物車中。本文介紹借助一款基于jQuery的動(dòng)畫(huà)插件，點(diǎn)擊加入購(gòu)物車按鈕時(shí)，實(shí)現(xiàn)商品將飛入到右側(cè)的購(gòu)物車中的效果。
2015-03-03
jQuery仿Excel表格編輯功能的實(shí)現(xiàn)代碼
Handsontable 是一個(gè)相當(dāng)給力的 jQuery 插件，它實(shí)現(xiàn)了 HTML 頁(yè)面中的表格編輯功能，并且是仿 Excel 的編輯效果。
2013-05-05
ASP.NET MVC中EasyUI的datagrid跨域調(diào)用實(shí)現(xiàn)代碼
因?yàn)閑asyUI使用的是JQuery的異步方法加載數(shù)據(jù)，應(yīng)該遵循JQuery的跨域訪問(wèn)規(guī)則
2012-03-03
使用jQuery設(shè)置disabled屬性與移除disabled屬性
Readonly只針對(duì)input和textarea有效，而disabled對(duì)于所有的表單元素都有效，下面為大家介紹下使用jQuery設(shè)置disabled屬性
2014-08-08
用jQuery模擬頁(yè)面加載進(jìn)度條的實(shí)現(xiàn)代碼
因?yàn)槲覀儫o(wú)法通過(guò)任何方法獲取整個(gè)頁(yè)面的大小和當(dāng)前加載了多少，所以想制作一個(gè)加載進(jìn)度條的唯一辦法就是模擬。那要怎么模擬呢
2011-12-12