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.代码
<meta><title>清冽叮咚短信音</title><div> <div></div> <div> <div> <div> <ul> <li><a>play</a></li> <li><a>pause</a></li> <li><a>stop</a></li> <li><a>mute</a></li> <li><a>unmute</a></li> <li><a>max volume</a></li> </ul> <div> <div> <div></div> </div> </div> <div> <div></div> </div> </div> </div> </div></div><script></script><script></script><script> 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>
附:HTML5支持的音频文件
文件格式 媒体类型
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav
各个浏览器的支持各有有所不同