Videojs set the container width and height to be too small, automatic playback failure problem solved

Recently, xiaomu needs to play rtmp stream during work. The video that comes with H5 obviously does not support it, so I searched the Internet for plug-ins that can play rtmp stream, so I found videojs

Originally used well, but the business needs need to play four videos on one page, which makes the width and height of each video container smaller, and the problem will follow...

Because the video will automatically play after the user clicks to play, the video tag has the autoplay attribute, just set it up...

<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>

Or videojs also has an automatic playback method:

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

But when I set all these settings, I found that it couldn't be played. After the videojs was rendered, a play button appeared on the interface:
because the width is less than 395px, it won’t play automatically...

Isn’t this disgusting? I’ve clicked once to play, and now I have to click again to play, drag it out and cut it...

But after my painstaking research, I finally found a solution:

Add a line of code above your rendering videojs code:

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

Don’t rush to try after adding it, because it doesn’t work yet, you need a file: the file referenced by the line of code you added: video-js.swf

Baidu cloud link of video-js.swf file:
Link: https://pan.baidu.com/s/15PHwfe_mriCYNVFSEf7lRA
Extraction code: e6g8

The structure of my test code:

Okay, now try again and find out.