工作需要,在网页上播放.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.