小编今天在使用Vue播放视频的时候,发现视频的格式是flv的,但是video标签是不支持flv格式的,我们只有借助第三方的工具库了。感谢bilibili团队制作的flv.js工具库。
我们首先安装下

npm install --save flv.js

然后我们在组件里面引入

import flvjs from 'flv.js'

我们再在视图里面创建一个id为videoElement的video标签。

<video id="videoElement" controls autoplay muted style="width: 4.5rem; height: 3rem;" />

在mounted中使用flvjs

mounted() {
    if (flvjs.isSupported()) {
        let videoElement = document.getElementById('videoElement');
        let flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            hasAudio: false,
            url: 'https://XXXXXX.flv'
        });
        console.log(flvPlayer, 'flv对象')
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
},

注意:

  1. flv.js工具库仅支持HTTPFLV协议的流,如果使用RTMP协议的流则依然需要使用flash插件。
  2. 如果没有包含音频流,hasAudio要设置为false。
  3. 如果要自动播放的话,由于浏览器禁用音频的自动播放,所以我们要在video标签上设置muted属性。
  4. 官方文档:https://github.com/bilibili/flv.js
Last modification:March 13th, 2021 at 01:04 pm
If you think my article is useful to you, please feel free to appreciate