vue video播放m3u8源

1，采坑记录

---

表现：使用videojs-contrib-hls在develop环境可以正常播放，但在product环境无法播放。
原因：videojs-contrib-hls组件打包时有无法解析的语法。
解决：不需要videojs-contrib-hls和vue-video-player，仅需要video.js == 7.20.2

---

表现：CCTV源无法播放，如:
        CCTV-1高清 http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
        CCTV-3高清 http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8
        CCTV-5高清 http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8
        CCTV-5+高清 http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8
        CCTV-6高清 http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8
        CCTV-8高清 http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8
        CHC高清电影 http://ivi.bupt.edu.cn/hls/chchd.m3u8
        北京卫视高清 http://ivi.bupt.edu.cn/hls/btv1hd.m3u8
        北京文艺高清 http://ivi.bupt.edu.cn/hls/btv2hd.m3u8
        北京体育高清 http://ivi.bupt.edu.cn/hls/btv6hd.m3u8
        北京纪实高清 http://ivi.bupt.edu.cn/hls/btv11hd.m3u8
        湖南卫视高清 http://ivi.bupt.edu.cn/hls/hunanhd.m3u8
        浙江卫视高清 http://ivi.bupt.edu.cn/hls/zjhd.m3u8
        江苏卫视高清 http://ivi.bupt.edu.cn/hls/jshd.m3u8
        东方卫视高清 http://ivi.bupt.edu.cn/hls/dfhd.m3u8
        安徽卫视高清 http://ivi.bupt.edu.cn/hls/ahhd.m3u8
        黑龙江卫视高清 http://ivi.bupt.edu.cn/hls/hljhd.m3u8
        辽宁卫视高清 http://ivi.bupt.edu.cn/hls/lnhd.m3u8
        深圳卫视高清 http://ivi.bupt.edu.cn/hls/szhd.m3u8
        广东卫视高清 http://ivi.bupt.edu.cn/hls/gdhd.m3u8
        天津卫视高清 http://ivi.bupt.edu.cn/hls/tjhd.m3u8
        湖北卫视高清 http://ivi.bupt.edu.cn/hls/hbhd.m3u8
        山东卫视高清 http://ivi.bupt.edu.cn/hls/sdhd.m3u8

原因：未知，可能是必须要https；

解决：可以播放的源如：
        https://live.cgtn.com/1000/prog_index.m3u8
        http://tinywan.com/live/4001490605096.m3u8
        https://livefr.cgtn.com/1000f/prog_index.m3u8
        https://liveru.cgtn.com/1000r/prog_index.m3u8
        https://livedoc.cgtn.com/1000d/prog_index.m3u8
        https://livear.cgtn.com/1000a/prog_index.m3u8 

---

 表现：无法切换视频源 VIDEOJS: WARN: Player "[object HTMLDivElement]" is already initialised. Options will not be applied.
 原因：多次调用videojs 需要先卸载组件，再重新加载；
 解决：
 

        if(this.player)
        {
          // 直接换源不起作用，reset也不行，必须dispose（坑1）
          this.player.dispose();
          // var newVideo = document.createElement('video');
          // newVideo.setAttribute('ref', 'videoPlayer'); 
          // newVideo.setAttribute('class', 'video-js');
          // var Fid = document.getElementById('fid');
          // 这种方式会遗留原先的video节点，dispose()没有清理干净（坑2）
          // Fid.appendChild(newVideo);
          document.getElementById('fid').innerHTML = '<video id="videoPlayer" ref="videoPlayer" class="video-js" ></video>';
        }
        
        this.$nextTick(() => {
          // 这种方式取不到动态添加的节点（坑3）
          // this.player = videojs(this.$refs.videoPlayer, this.playerOptions);
          this.player = videojs(document.getElementById('videoPlayer'), this.playerOptions);
          this.player.play();
        });

---

2，安装和引入依赖

npm install video.js

	import videojs from 'video.js';
	import 'video.js/dist/video-js.css';

 

3，页面

    <el-dialog title="实时监控" :visible.sync="showVideo" width="80%" append-to-body :before-close="handleClose">
      <!-- 本地摄像头 -->
      <!-- <video id="video" width="100%" height="100%" autoplay /> -->

      <!-- 网络摄像头 -->
      <div id='fid'>
        <video id="videoPlayer" ref="videoPlayer" class="video-js" ></video>
      </div>
    </el-dialog>

4，JS

	data() {
		return {
			...
				 player: null,
				 playerOptions:{
				autoplay: true, // 如果true,浏览器准备好时开始播放。
				muted: false, // 默认情况下将会消除任何音频。
				loop: true, // 导致视频一结束就重新开始。
				preload: 'auto', // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: 'zh-CN',  //汉化
				fluid: true, // 当true时，播放器将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				sources: [{
				    type: 'application/x-mpegURL',
				    src: 'https://live.cgtn.com/1000/prog_index.m3u8',
				}],
				notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息。
				controlBar: {
				  timeDivider: true,
				  durationDisplay: true,  //视频时长时间显示
				  remainingTimeDisplay: false,  //剩余时间显示
				  fullscreenToggle: true // 全屏按钮
				},
				errorDisplay: false,  //错误显示
				posterImage: false,  //视频的预览海报图片显示
				bigPlayButton: true,  //视频中间的播放按钮显示
				textTrackDisplay: false
			      },
			...
		}
	}，
	methods: {
		handleShowVideo(row) {
		      const ciId = row.ciId || this.id;
		      getInfo(ciId).then(response => {
			const element = response.data;
			// 网络摄像头
			this.showVideo = true;
			this.playerOptions.sources = [
			  {
			      type: 'application/x-mpegURL',
			      src: element.ciUrl
			  },
			];

			if(this.player)
			{
			  // 直接换源不起作用，reset也不行，必须dispose（坑1）
			  this.player.dispose();
			  // var newVideo = document.createElement('video');
			  // newVideo.setAttribute('ref', 'videoPlayer'); 
			  // newVideo.setAttribute('class', 'video-js');
			  // var Fid = document.getElementById('fid');
			  // 这种方式会遗留原先的video节点，dispose()没有清理干净（坑2）
			  // Fid.appendChild(newVideo);
			  document.getElementById('fid').innerHTML = '<video id="videoPlayer" ref="videoPlayer" class="video-js" ></video>';
			}
			
			this.$nextTick(() => {
			  // 这种方式取不到动态添加的节点（坑3）
			  // this.player = videojs(this.$refs.videoPlayer, this.playerOptions);
			  this.player = videojs(document.getElementById('videoPlayer'), this.playerOptions);
			  this.player.play();
			});

		      });

		      // 本地摄像头
		      // this.initVideo();
		    },
		    /** 关闭监控直播对话框 */
		    handleClose() {
		      this.showVideo = false;
		      
		      // 销毁本地摄像头
		      if (this.video && this.video !== null) {
			this.video.srcObject.getTracks().forEach(element => {
			  element.stop();
			});
		      }

		      // 销毁网络摄像头

		    },
	}