乌徒帮技术范WEB开发HTML5 › 让HTML5 video标签随处兼容的MediaElement.js

让HTML5 video标签随处兼容的MediaElement.js

分类:HTML5

HTML5中的新新标签<video>虽然可以代替flash player,但实际上由于受到版权等各种解码限制,以及受到兼容性的质疑,导致这个标签只能在部分浏览器中使用,为了更好的兼容不同的浏览器,以让不同的用户体验HTML5特性,MediaElement.js横空出世。

HTML5 <video> and <audio> made easy.
One file. Any browser. Same UI.

这是MediaElement.js官网的口号,只需要一个js文件,一切都已经完成了。目前,wordpress3.6已经采用这个脚本,在wordpress新版本的默认主题中,你已经可以快速方便的使用各种视频了。

这个脚本的使用方法很简单,首先从MediaElement.js官网下载它,然后简单的在你的网页头部部署文件:

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />

最后,就是让你的<video>标签更兼容:

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
??? <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
??? <source type="video/mp4" src="myvideo.mp4" />
??? <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
??? <source type="video/webm" src="myvideo.webm" />
??? <!-- Ogg/Vorbis for older Firefox and Opera versions -->
??? <source type="video/ogg" src="myvideo.ogv" />
??? <!-- Optional: Add subtitles for each language -->
??? <track kind="subtitles" src="subtitles.srt" srclang="en" />
??? <!-- Optional: Add chapters -->
??? <track kind="chapters" src="chapters.srt" srclang="en" />
??? <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
??? <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
??????? <param name="movie" value="flashmediaelement.swf" />
??????? <param name="flashvars" value="controls=true&file=myvideo.mp4" />
??????? <!-- Image as a last resort -->
??????? <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
??? </object>
</video>

因为这个脚本提供了统一的播放界面,无论是PC浏览器,还是手机客户端,都采用统一的UI,所以让你的网页不再受到浏览器的限制。

播放视频:

<script>
// using jQuery
$('video,audio').mediaelementplayer(/* Options */);
</script>

这在HTML5中需要不少的代码,只能调用浏览器的API,但通过植入MediaElement.js可以实现更多。它还提供了很多API,你可以通过它的官网首页就可以获得这些API了。

填写个人信息,赶快回复吧!