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

写在开头

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>
                <!-- 这个默认隐藏，在视频播放完显示出来盖在播放器上面，解决视频播放完，播放器区域全部是黑色的问题 -->
                <div class="preview-pic">
                </div>
            </div>
        </div>

videojs初始化代码如下：
玩家准备：初始化方法
Video.js选项参考：第二个参数可选

 		videoInit.call("#videoParents");
        function videoInit() {
            if (typeof videojs != 'function') {
                return false;
            }
            window.player = videojs("#videoPlayer", {
                autoplay: false,
                controls: true,
                muted: false,
                preload: 'metadata',
                // loop: true,
                width: this.width,//this指向video父级
                //height: this.height,
                //视频长宽比例，这个可以根据视频的帧宽高算出来，可以保证播放器没有黑边，全部占满
                aspectRatio: "16:9"
            }, function () {
                //console.log("video init")
                //this.addClass("vjs-matrix");//添加自定义类名
                var _height = $(".vjs-control-bar").css("height");
                $(".preview-pic").css("bottom", _height);
        		//视频数据加载完成，可以获取视频时长
                this.on('loadedmetadata', function () {
                    var videoTimeLength = Math.round(this.duration()) || "00";
                });
                //播放
                this.on("play", function () {
                    $(".preview-pic").hide();
                })
                // 结束
                this.on('ended', function () {
                    $(".preview-pic").show();
                    if (this.isFullscreen()) {
                        //退出全屏
                        player.exitFullscreen();
                    }
                });
            });
        }

结语

每个人遇到的问题肯定都是不同的，我这里只是记录一下自己的问题，上面代码如有不合理之处，请不吝赐教，谢谢！