jw player解决网页播放mp4文件的问题

最新推荐文章于 2025-06-27 16:39:46 发布

alatook22

最新推荐文章于 2025-06-27 16:39:46 发布

阅读量1.6w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：技术文章文章标签： jw player 网页 mp4 浏览器兼容性

本文链接：https://blog.youkuaiyun.com/alatook22/article/details/52473411

技术文章专栏收录该内容

2 篇文章

订阅专栏

本文分享了在不同浏览器及操作系统环境下实现网页播放.mp4文件的过程。从使用<embed>标签到<video>标签，最终采用jwplayer插件版本6.6并配置正确的MIME类型，解决了兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作需要，在网页上播放.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”，点击“确定”。