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

古城微笑少年丶 2023-05-21 07:15 6阅读 0赞

最近 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之后就不会自动播放…  
![在这里插入图片描述][20200429210012688.png]  
这岂不是很恶心吗？已经点击一次播放了，现在还要再点击一次才能播放，拖出去斩了吧…

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

在你渲染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

我测试代码的结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jvb2tpZXhpYW9NdV9h_size_16_color_FFFFFF_t_70]

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

[20200429210012688.png]: /images/20230521/cdfb56676d7d4bc087f15dc0228f96e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jvb2tpZXhpYW9NdV9h_size_16_color_FFFFFF_t_70]: /images/20230521/6f3549070b8d4e60a2f8c96e556f342c.png