Videojsがコンテナの幅と高さを小さすぎるように設定しました。自動再生の失敗の問題が解決しました

最近、xiaomuは仕事中にrtmpストリームを再生する必要があります。H5に付属のビデオは明らかにそれをサポートしていません。そこでrtmpストリームを再生できるプラグインをインターネットで検索したところ、videojsが見つかりました。

元々はうまく使用されていましたが、ビジネスでは1ページに4つのビデオを再生する必要があります。これにより、各ビデオコンテナの幅と高さが小さくなり、問題が発生します...

ユーザーがクリックして再生すると動画が自動的に再生されるため、動画タグには自動再生属性があり、設定するだけです...

<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がレンダリングされると、インターフェースに再生ボタンが表示されます。
幅が395px未満であるため、自動的に再生されません...

Isnこれは嫌じゃない？一度クリックして再生しましたが、もう一度クリックして再生し、ドラッグして切り取ります...

しかし、私の入念な調査の後、私はついに解決策を見つけました：

レンダリング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ファイルのBaiduクラウドリンク：
リンク：https
：//pan.baidu.com/s/15PHwfe_mriCYNVFSEf7lRA抽出コード：e6g8

私のテストコードの構造：

さて、もう一度やり直して調べてください。