欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-08 18:30:34
...

最近 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代码上面添加一行代码:

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

我测试代码的结构:
videojs设置容器宽高太小自动播放失效问题解决

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