m3u8视频格式 在vue中 如何实现实时直播

m3u8视频格式 在vue中 如何实现实时直播

在这里,先说明一个坑
videojs 使用m3u8视频格式 有点问题
问题在于 他视频在实时播放五六秒后 会自动暂停,也可能有解决办法,凡事我没有找到,如果有大佬有办法,麻烦给我留言 ,谢谢

首先,引入 flv.js
npm install video.js
npm i videojs-contrib-hls -S

在main.js中
// 引入直播视频
import 'video.js/dist/video-js.css’

直接上代码
在直播 的vue的页面引入
import videojs from ‘video.js’;
import ‘videojs-contrib-hls’;

data(){
player: ‘’, // 直播
}

// 之后 就是方法的直接引用 大家直接看代码

video标签 写在dialog框里 那个source标签 千万不能写

之后再methods里直接写方法
我这边涉及到了出入口 所以做个判断 大家如果用的话 直接把你的那个视频地址 后缀是m3u8的那个地址放到下一个方法中 就可直接使用

这个parkVideo 就是video的id

    changeVideo(url) {
      var _self = this;
      setTimeout(function() {
        this.player = videojs(
          document.getElementById('parkVideo'),
          {
            controls: true, // 是否显示控制条
            preload: 'auto',
            autoplay: true,
            fluid: true, // 自适应宽高
            language: 'zh-CN', // 设置语言
            // muted: false, // 是否静音
            inactivityTimeout: false,
            controlBar: {
              // 设置控制条组件
              /* 设置控制条里面组件的相关属性及显示与否
                    'currentTimeDisplay':true,
                    'timeDivider':true,
                    'durationDisplay':true,
                    'remainingTimeDisplay':false,
                    volumePanel: {
                      inline: false,
                    }
                    */
              /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
              children: [
                { name: 'playToggle' }, // 播放按钮
                { name: 'currentTimeDisplay' }, // 当前已播放时间
                { name: 'progressControl' }, // 播放进度条
                { name: 'durationDisplay' }, // 总时间
                {
                  // 倍数播放
                  name: 'playbackRateMenuButton',
                  playbackRates: [0.5, 1, 1.5, 2, 2.5]
                },
                {
                  name: 'volumePanel', // 音量控制
                  inline: false // 不使用水平方式
                },
                { name: 'FullscreenToggle' } // 全屏
              ]
            },
            sources: [
              // 视频源
              {
                src: url,
                type: 'application/x-mpegURL'
                // poster: '//vjs.zencdn.net/v/oceans.png'
              }
            ]
          },
          function() {
            console.log(url)
            console.log('视频可以播放了', this);
            this.play();
          }
        );
      }, 1000);
    },