videojs设置容器宽高太小自动播放失效问题解决

最近 xiaomu 在工作中业务需求需要播放rtmp流，H5自带的video显然不支持，所以上网搜索了一下可以播放rtmp流的插件，于是找到了videojs

本来使用的好好的，但是业务需求需要在一个页面播放四个视频，这就使得每个video容器的宽高变小了，问题也就随之而来…

因为用户点击播放之后视频要自动播放，video 标签有autoplay属性，设置一下就好了…

<video id="my-video" class="video-js" autoplay="false" controls preload="auto" width="375px" height="250px">
        <source src="rtmp://58.200.131.2:1935/livetv/hunantv" type='rtmp/flv'>
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>

或者videojs也有自动播放的方法：

var myPlayer = videojs("my-video");// 初始化videojs
videojs("my-video").ready(
    function () {
    
    
        var myPlayer = this;
        myPlayer.play();// 播放的方法
        // myPlayer.pause();// 暂停的方法
    }
);

但是当我把这些该设置的都设置完之后，发现并播放不了，videojs渲染完之后，界面出现一个播放按钮：
因为width小于395px之后就不会自动播放…

这岂不是很恶心吗？已经点击一次播放了，现在还要再点击一次才能播放，拖出去斩了吧…

但是进过我的潜心研究，终于是发现了解决办法：

在你渲染videojs代码上面添加一行代码：

videojs.options.flash.swf = 'video-js.swf';// <---新加的代码
var myPlayer = videojs("my-video");
videojs("my-video").ready(
    function () {
    
    
        var myPlayer = this;
        myPlayer.play();
    }
);

加上之后别着急试，因为还不行，还需要一个文件：就是你新加那行代码引用的文件：video-js.swf

video-js.swf文件百度云链接：
链接：https://pan.baidu.com/s/15PHwfe_mriCYNVFSEf7lRA
提取码：e6g8

我测试代码的结构：

好了，现在再试一下发现就可以。