vue播放直播视频

npm install --save mpegts.js

<video 
    autoplay="true"
    muted="false"
    controls="false" 
    id="elementId" 
    style="width:450px;height:300px">
</video>

<script>
    import mpegts from 'mpegts.js';


   methods:{
            initVideo(){
                const ele = document.getElementById('elementId');
                let flvPlayer = mpegts.createPlayer(
                    {
                        type: 'flv', // 指定媒体类型
                        isLive: true, // 开启直播（是否为实时流）
                        hasAudio: false, // 关闭声音（如果拉过来的视频流中没有音频一定要把这里设置为fasle，否则无法播放）
                        cors: true, // 开启跨域访问
                        url:'http://123456798.flv'// 指定流链接（这里是传递过过来的视频流的地址）
                    },
                    {
                        enableWorker: false, //启用分离的线程进行转换（如果不想看到控制台频繁报错把它设置为false，官方的回答是这个属性还不稳定，所以要测试实时视频流的话设置为true控制台经常报错）
                        enableStashBuffer: false, //关闭IO隐藏缓冲区（如果需要最小延迟，则设置为false，此项设置针对直播视频流）
                        stashInitialSize: 128, //减少首帧等待时长（针对实时视频流）
                        lazyLoad: false, //关闭懒加载模式（针对实时视频流）
                        lazyLoadMaxDuration: 0.2, //懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
                        deferLoadAfterSourceOpen: false, //在MediaSource sourceopen事件触发后加载。在Chrome上，在后台打开的标签页可能不会触发sourceopen事件，除非切换到该标签页。
                        liveBufferLatencyChasing: true, //追踪内部缓冲区导致的实时流延迟
                        liveBufferLatencyMaxLatency: 1.5, //HTMLMediaElement 中可接受的最大缓冲区延迟（以秒为单位）之前使用flv.js发现延时严重，还有延时累加的问题，而mpegts.js对此做了优化，不需要我们自己设置快进追帧了
                        liveBufferLatencyMinRemain: 0.3 //HTMLMediaElement 中可接受的最小缓冲区延迟（以秒为单位）
                    }
                )
                flvPlayer.attachMediaElement(ele)
                flvPlayer.load();
                flvPlayer.play();
                this.flvPlayer = flvPlayer
                // flvPlayer.on(mpegts.Events.STATISTICS_INFO, () => {
                //     const end = flvPlayer.value.buffered.end(0); //获取当前buffered值（缓冲区末尾）
                //     const differTime = end - flvPlayer.value.currentTime; //获取bufferend与当前播放位置的差值
                //     console.log('差值为：' + differTime);
                // });
            },
            // 销毁
            destory ()  {
                if(this.flvPlayer){
                    this.flvPlayer.pause;
                    this.flvPlayer.unload();
                    this.flvPlayer.detachMediaElement();
                    this.flvPlayer.destroy();
                    this.flvPlayer = null;
                }
            },


</script>