工作需要,在網頁上播放.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”,點選“确定”。
然而ie依然不放播放,錯誤如下:
繼續找原因。
神回複 http://stackoverflow.com/questions/16384054/jwplayer-not-loading-in-ie-10 告訴我,mp4的格式不對。
删除原先網站已經添加的MIME屬性,重複按照上述步驟進行添加,将application/octet-stream改為video/mp4,成功。
測試環境:xp、win7、win10系統,測試浏覽器IE8、IE9、IE10、IE11、FireFox、Chrome、360極速浏覽器(極速、相容、IE10模式),都ok.