Videojs establece que el ancho y la altura del contenedor son demasiado pequeños, problema de falla de reproducción automática resuelto

Recientemente, xiaomu necesita reproducir rtmp stream durante el trabajo. El video que viene con H5 obviamente no lo admite. Así que busqué en Internet un complemento que pueda reproducir rtmp stream, así que encontré videojs

Originalmente se usó bien, pero la empresa necesita reproducir cuatro videos en una página, lo que hace que el ancho y la altura de cada contenedor de video sean más pequeños, y el problema seguirá ...

Debido a que el video se reproducirá automáticamente después de que el usuario haga clic para reproducir, la etiqueta de video tiene el atributo de reproducción automática, solo configúrelo ...

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

O videojs también tiene un método de reproducción automático:

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

. Pero cuando me puse todos estos ajustes, me encontré con que no se puede reproducir Después de los videojs se representa, un botón de reproducción aparece en la interfaz:
debido a que el ancho es de menos de 395px, no va a jugar automáticamente ...

Isn ¿No es esto repugnante? Hice clic una vez para jugar, y ahora tengo que hacer clic de nuevo para reproducir, arrastrarlo y cortarlo ...

Pero después de mi minuciosa investigación, finalmente encontré una solución:

Agregue una línea de código encima de su código de renderizado de videojs:

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

No se apresure a intentarlo después de agregarlo, porque aún no funciona, necesita un archivo: el archivo al que hace referencia su línea de código recién agregada: video-js.swf

Enlace en la nube de Baidu del archivo video-js.swf:
Enlace: https://pan.baidu.com/s/15PHwfe_mriCYNVFSEf7lRA
Código de extracción: e6g8

La estructura de mi código de prueba:

Bien, ahora inténtalo de nuevo y descúbrelo.