直接看代码

<template>
    <div class="strategic-cooperation">
	    <video
	         id="myVideo"
	         class="video-js vjs-default-skin vjs-big-play-centered vjs-progress-holder"
	         ref="viodeRef"
	         poster=""
	         style="width:100%;height:504px;"
	         >
	     </video>
    </div>
</template>

<script>
    export default {
        name: "strategic-cooperation-detail",
        components:{  },
        data () {
            return {
                myPlayer:'',  //播放器
                videoUrl:'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8'  //直播视频地址
            };
        },
        created(){ },
        mounted(){
	        //初始化视频
	        if(this.videoUrl){
	            this.myPlayer = this.$video(myVideo, {
	                controls: true, //启动视频播放的唯一方法是使用autoplay属性或通过Player /v1。
	                autoplay: true,  //自动播放属性,muted:静音播放 muted 
	                preload: "auto",    //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
	                "sources": [{
	                    src: this.videoUrl,
	                    type:"application/x-mpegURL"
	                }],
	            },function(){});
	        }else{
	            const videoDom = this.$refs.viodeRef;  //不能用document 获取节点
	            this.$video(videoDom).dispose();  
	        }
        },
        beforeDestroy:function(){
            //离开页面销毁video实例，避免出现节点不存在 但是flash一直在执行，报 this.el.......is not function
            const videoDom = this.$refs.viodeRef;  //不能用document 获取节点
            this.$video(videoDom).dispose();  
        },
        methods: { },
    }
</script>

<style scoped lang="less">

</style>