HTML5播放器 MediaElement.js 使用方法

時間 2019-12-09

標籤 html5 html 播放 mediaelement.js mediaelement 使用方法欄目 HTML5 简体版

原文原文鏈接

目前已經有不少html5播放器可使用，使用html5播放器能夠輕鬆的在頁面中插入媒體視頻，從而使咱們的web頁面變得更加豐富多彩，因此今天向你們推薦一款很是優秀的html5播放器MediaElement.js，它不只可以添加咱們經常使用的html5視頻格式（mp4,m4v,mov），並且還支持回退方式，即一些低版本的瀏覽器不支持 HTML5 播放能夠採起flash的方式進行播放，從而達到支持絕大部分的瀏覽器。javascript

備註：咱們都知道進入 HTML5 時代之後W3C組織爲web視頻播放加入了一個很是友好的標籤<video>，它可讓你直接插入mp四、mov等格式的視頻，可是這是瀏覽器默認的方式，播放的功能也比較單一，因此藉助MediaElement.js能夠實現豐富的播放效果。css

目前MediaElement.js所能支持的瀏覽器如圖html

首先MediaElement.js支持三種外觀顯示html5

默認效果java

ted-外觀jquery

wmp-外觀git

外觀設置方法：只須要在對應的<video>標籤中加入對應的class 類便可github

<h2>Default Skin</h2> <video width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4" id="player1" poster="../media/echo-hereweare.jpg" controls="controls" preload="none"></video>

<h2>TED SKin</h2> <video class="mejs-ted" width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4" id="player1" poster="../media/echo-hereweare.jpg" controls="controls" preload="none"></video>

<h2>WMP SKin</h2> <video class="mejs-wmp" width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4" id="player1" poster="../media/echo-hereweare.jpg" controls="controls" preload="none"></video>

如何調用MediaElement.js ？
首先咱們下載 MediaElement.js官方最新版 web

1.引用js腳本和css樣式表 並放置在<head> 標籤中。 sql

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

2. 調用視頻文件

<video src="myvideo.mp4" width="320" height="240"></video>

支持單一的h.264編碼的視頻文件（mp4）,該方式適用於firefox,chrome,safari,已經ie9以上版本的主流瀏覽器。

flash回退

爲了支持低版本的瀏覽器以及對不一樣用戶羣的支持，MediaElement.js提供了flash回退的方式，你能夠採用如下代碼進行調用

<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-<span class="wp_keywordlink_affiliate"><a href="http://www.dglives.com/tag/html5" title="查看HTML5中的所有文章" target="_blank">HTML5</a></span> 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>

3.添加媒體支持如音頻和視頻格式，在</body>標籤前添加如下代碼

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

固然你還能夠爲本身建立MediaElementPlayer對象播放方式

<script> var player = new MediaElementPlayer('#player',/* Options */); // ... more code ... player.pause(); player.setSrc('mynewfile.mp4'); player.play(); </script>

4.還需最後一步，爲服務器添加 MIME-types
若是是Linux/Apache服務器，咱們須要建立一個名爲.htaccess的文件，讓後上傳到web服務器根的目錄才能讓瀏覽器正確識別。
使用windows/iis 服務器的朋友能夠查看MIME types 在 IIS6 和 IIS7 中的設置方法。
如下是官方提供的代碼：

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

以前我試過以上代碼，貌似部分瀏覽器打不開視頻，識別不許確，而後又從上網找了一個完美版的

AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm
AddType audio/ogg ogg
AddType audio/ogg oga
AddType audio/wav wav
AddType audio/mpeg mp3
AddType audio/mp4 mp4
AddType audio/mp4 mpa

將以上代碼粘貼到文本中，保存爲.htaccess文件後上傳到服務器根目錄便可，建議上傳一份到存放視頻文件夾相同的位置。

MediaElement.js支持插入視頻縮略圖

讓視頻正在加載的時候你能夠先顯示出視頻圖片，在vedio標籤中插入poster便可

<video width="640" height="360" id="player2" poster="../media/echo-hereweare.jpg" controls preload="none">

視頻縮略圖演示效果

MediaElement.js完美支持音頻播放
想要MediaElement.js支持音頻播放那是再簡單不過了，只需添加一行代碼便可。

<audio id="player" src="../media/AirReview-Landmarks-02-ChasingCorporate.mp3" type="audio/mp3" controls>

音頻演示地址

MediaElement.js 支持字幕插入

咱們都知道有些原生視頻是沒內嵌字幕的，因此咱們須要額外對視頻添加字幕，幸運的是MediaElement.js支持着項功能，咱們能夠直接進行調用。
爲視頻添加<track>元素，咱們能夠參考如下代碼進行設置

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none"> <source type="video/mp4" src="myvideo.mp4" /> <track kind="subtitles" src="subtitles.srt" srclang="en" /> </video>

選擇自動添加指定語言的字幕

jQuery(document).ready(function($) {
  
    $('audio,video').mediaelementplayer({
        // automatically create these translations on load translations:['es','ar','yi','zh-cn'], // allow the user to add additional translations translationSelector: true, // start with English automatically turned on startLanguage: 'en' }); });