使用videojs，安卓可以正常播放视频，ios浏览器报错The media could not be loaded,either because the server or network ...

最新推荐文章于 2025-09-21 08:58:05 发布

原创

最新推荐文章于 2025-09-21 08:58:05 发布 · 2.6w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

博客讲述了在使用videojs框架时遇到的iOS浏览器视频播放问题，详细描述了从发现问题到解决问题的过程。通过比较安卓与iOS设备上的视频差异，发现帧宽高可能是问题所在。通过调整视频帧宽并重新上传，最终解决了iOS无法播放的问题。代码示例展示了videojs的使用及初始化配置。

写在开头

video标签在各个浏览器中表现各异，存在很多兼容性问题，所以我尝试使用了videojs这个框架
传送门：videojs起步
传送门：videojs文档

直入主题

问题：按照videojs文档添加视频后，发现安卓可以正常播放视频，但是ios浏览器报错：The media could not be loaded,either because the server or network failed or because the format is not supported（无法加载媒体，原因可能是服务器或网络出现故障，或者不支持该格式）。

找出问题：安卓可以播放，说明网络没有问题；我刚开始怀疑是视频太大了，用了更小的视频发现还是无法加载。之后我尝试使用了m端详情页视频文件（因为详情页视频文件ios可以正常播放），发现也可以正常加载，于是我对比了两个视频文件的差异（见下图，左边为无法播放视频，右边为可以正常播放视频）。

视频文件对比
解决问题：至此可见，视频差异为帧宽高。由于高度是自适应。所以我使用pr，对原视频进行了处理，将帧宽也改为750（只需使用pr导出视频时设置一下视频宽度，高度会根据宽高比例对应生成），将处理好的视频文件重新上传到服务器后，发现可以正常播放，问题解决。

pr软件百度云资源：

链接：https://pan.baidu.com/s/1MjYGlSBgQ95hqkMdmvwT8Q
提取码：uaku
复制这段内容后打开百度网盘手机App，操作更方便哦

注意：这是m端才有的问题，pc端不用处理宽度也可以正常播放

记录一下使用videojs的代码

        <div id="videoParents">
            <div class="video-box">
                <video id="videoPlayer" 
                    class="video-js" 
                    x5-video-player-type="h5" //启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上(比如弹幕)
                    x-webkit-airplay="true" 
                    playsinline 
                    webkit-playsinline="true" //playsinline可以让视频在小窗内播放，可以解决ios播放视频默认全屏问题，
                    preload="none" 
                    controls
                    src="https://video.hua.com/publicity_video_2020_m.mp4"
                    poster="https://img02.hua.com/m/about_us/publicity_video_img.jpg">
                        <source src="https://video.hua.com/publicity_video_2020_m.mp4" type="video/mp4">
                        <p class="vjs-no-js">您的浏览器不支持 HTML 5 Video 标签，请升级浏览器。</p>
                </video>
                <!-- 这个默认隐藏，在视频播放完显示出来盖在播放器上面，解决视频播放完，播放器区域全部是黑色的问题 -->
                <