广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~
最近一段时间在使用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/mpegOgg audio/oggWav audio/wav
各个浏览器的支持各有有所不同
以上就是HTML5视频播放的详细介绍的详细内容，更多请关注9543建站博客其它相关文章！
发表评论