天天看點

jw player解決網頁播放mp4檔案的問題

工作需要,在網頁上播放.mp4檔案。節約時間可之間看 「成功」 部分。

失敗1.

最先想到的是使用<embed>标簽(在其他網站上看到過嵌入代碼),網上搜尋後找到如下代碼:

<embed src="1.mp4" height="480" width="640" autostart="true" loop="false">
           

出現浏覽器相容性問題。

該方法似乎使用的是win7系統自帶播放器,在win10和xp情況下則無法顯示;如果使用chrome,則無法顯示,chrome會自動下載下傳mp4檔案(不友善)。

此路不通。

網上推薦使用<video>标簽,但是在ie10下無法顯示,失敗。

失敗2.

考慮上傳到新浪微網誌等網站,然後<embed>過來,但是估計Boss不同意。原因有二:

1.有水印,Boss估計不喜歡。

2.浏覽量不會太大,伺服器可以負擔。

失敗3.

考慮使用第三方插件。大概有:MediaElement、video-js、jw player.

選擇了jw player(據說YouTube以前用)。

官網(https://www.jwplayer.com/)下載下傳了最新的7.6.1版本,可以免費新增賬號然後下載下傳,注冊時會給一個key.

1.在<head>中添加引用

<span style="font-size:18px;"><script type="text/javascript" src="../jwplayer/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key = "8ZhfMglRxkc69D+X0HkylhQHre8U/qihcqTR1g==";</script></span>
           

注:一定要加入key才可以加載使用。

2.在<body>中使用

<div id='myplayer'></div> 
      <script type='text/javascript'>
        jwplayer('myplayer').setup({
        file: '1.mp4',
        width: '640',
        height: '480'
        });   
      </script> 
           

這次chrome可以了,ie10也沒問題,但是在ie8卻顯示網頁有js錯誤...(崩潰)。

成功.

再次尋找,找到版本6.6(網上有,找不到可Q我)。6.6不需要用key.

1.<head>添加檔案。

<script type="text/javascript" src="../jw/jwplayer.js"></script>
           

2.<body>使用。

<div id="myElement">  </div>

    <script type="text/javascript">
        jwplayer("myElement").setup({
            file: "1.mp4",
            width: '640',
            height: '480',
            autostart: 'true'
        });
    </script>
           

ie10打開,發現無法加載。。。(再次崩潰)

上網找原因。

說必須要放到伺服器上,不可以本機調試。然而chrome、firefox都可以。

放到伺服器,依照要求對網站的mime類型添加.mp4,這樣才可以播放。具體步驟:

在iis中相應的網站上右鍵選擇“屬性”,在彈出的視窗中選擇“HTTP頭”頁籤,然後點選“MIME類型”,在彈出的視窗中點選“建立”,在擴充名和MIME類型的文本框中分别填入“mp4”和“application/octet-stream”,點選“确定”。

jw player解決網頁播放mp4檔案的問題

然而ie依然不放播放,錯誤如下:

jw player解決網頁播放mp4檔案的問題

繼續找原因。

神回複 http://stackoverflow.com/questions/16384054/jwplayer-not-loading-in-ie-10 告訴我,mp4的格式不對。

jw player解決網頁播放mp4檔案的問題

删除原先網站已經添加的MIME屬性,重複按照上述步驟進行添加,将application/octet-stream改為video/mp4,成功。

測試環境:xp、win7、win10系統,測試浏覽器IE8、IE9、IE10、IE11、FireFox、Chrome、360極速浏覽器(極速、相容、IE10模式),都ok.

繼續閱讀