HTML5视频播放的详细介绍
最近一段时间在使用PhoneGap开发一个App应用，App需要播放视频，本想直接使用html5的video，但使用它在全屏播放时不支持横屏播放，只能放弃。最终决定还是自己封装一个播放器算了，免得以后要扩展功能麻烦。
最近迷上hi这个单词，所以我给这个播放器取名叫做：hivideo。
hivideo是一款基于html5的视频播放器，摒弃video原有的播放控制条样式，自己重写了一次。支持暂停、播放进度控制、声音控制、全屏播放。如果是要在手机端使用hivideo，全屏播放时还支持横屏播放。
jPlayer : 基于HTML5/Flash的音频、视频播放器
jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto插件);
jPlayer可以让你迅速编写一个跨平台的支持音频和视频播放的网页.
jPlayer的丰富API可以让你创建一个个性化多媒体应用，因此也获得越来越多的社区成员的支持和鼓励。
官网:www.jplayer.cn
英文：www.jplayer.org
1.准备
jquery.min.js、jquery.jplayer.min.js、jquery.jplayer.swf （官网下载）
还有一个音频文件
2.代码
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gbk />
<title>清冽叮咚短信音</title>
</head>
<body>
<div id=play-box>
<div id=jquery_jplayer_1 class=jp-jplayer></div>
<div id=jp_container_1 class=jp-audio>
<div class=jp-type-single>
<div class=jp-gui jp-interface>
<ul class=jp-controls>
<li><a href=javascript:; class=jp-play tabindex=1>play</a></li>
<li><a href=javascript:; class=jp-pause tabindex=1>pause</a></li>
<li><a href=javascript:; class=jp-stop tabindex=1>stop</a></li>
<li><a href=javascript:; class=jp-mute tabindex=1 title=mute>mute</a></li>
<li><a href=javascript:; class=jp-unmute tabindex=1 title=unmute>unmute</a></li>
<li><a href=javascript:; class=jp-volume-max tabindex=1 title=max volume>max volume</a></li>
</ul>
<div class=jp-progress>
<div class=jp-seek-bar>
<div class=jp-play-bar></div>
</div>
</div>
<div class=jp-volume-bar>
<div class=jp-volume-bar-value></div>
</div>
</div>
</div>
</div>
</div>
<script src=jquery.min.js?1.1.11 type=text/javascript></script>
<script src=jquery.jplayer.min.js?1.1.11 type=text/javascript></script>
<script type=text/javascript>
function toplay(){
var playerc = $("#jquery_jplayer_1");
if (playerc.data().jPlayer && playerc.data().jPlayer.internal.ready === true) {
playerc.jPlayer("setMedia", {
m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //使用网络资源，自行设定音频文件
}).jPlayer("play");//jPlayer("play") 用来自动播放
}else {
playerc.jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //同上
}).jPlayer("play");//同上
},
swfPath: "include/javascript",
supplied: "m4a" //acc属于M4A
});
}
}
setInterval(function(){
toplay();
},3000);//3秒循环播放
</script>
</body>
</html>
附：HTML5支持的音频文件
文件格式 媒体类型
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
各个浏览器的支持各有有所不同
以上就是HTML5视频播放的详细介绍的详细内容，更多请关注双恒网络其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
云资源网
