vue使用Dplayer播放m3u8

1、安装dplayer hls
	npm i dplayer -S npm i hls.js -S

2、在使用的组件中引入  ps:hls一定要放在dplayer前面
	import Hls from 'hls.js'
	import Dplayer from 'dplayer'

3、创建一个id为dplayer的容器
	<div id="dplayer" style="height: 450px"></div>

4、在data中声明一个dp,用以保存dplayer,然后在methods声明一个方法对dplayer初始化,方法可以在放在
mounted中,如果要在created或者点击事件中,需要放在$nextTick中
			data(){
		  		return {
		  			dp:null,
		  		}
			}
		//Dplayer初始化
	    onInitDplayer(val){
	      let index = val.indexOf(':')+1
	      val = val.substring(index)
	      console.log(val)
	      this.dp = new Dplayer({
	        container: document.getElementById('dplayer'),
	        autoplay: false,
	        theme: '#FADFA3',
	        loop: true,
	        lang: 'zh-cn',
	        screenshot: false,
	        hotkey: true,
	        preload: 'auto',
	        volume: 0.7,
	        mutex: true,
	        video: {
	          url:val,
	          type:'customHls',
	          customType: {
	            customHls: function (video, player) {
	              const hls = new Hls()
	              hls.loadSource(video.src)
	              hls.attachMedia(video)
	            }
	          },
	        },
	      });
	    },
			this.$nextTick(()=>{
              this.onInitDplayer(scope.videoUrl)
            })
Logo

前往低代码交流专区

更多推荐