通过本文主要向大家介绍了jquery,html5,视频播放等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
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可以让你创建一个个性化多媒体应用，因此也获得越来越多的社区成员的支持和鼓励。