video标签设计vue视频播放器组件

1.video播放器组件设计

啥也别说了，上代码：

<template>
<div>
	<meta content="no-referrer" name="referrer">
	<video :controls="videoOptions.controls"
            class="video-js vjs-big-play-centered vjs-fluid"
            webkit-playsinline="true"
            playsinline="true"
            x-webkit-airplay="allow"
            x5-playsinline
            style="width: 100%;"
            @play="onPlayerPlay"
            @pause="onPlayerPause"
            @seeking="seeking"
            autoplay="autoplay"
            ref="video"
			id="myVideo1">
			<source :src="videoOptions.src" type="video/mp4" v-on:click="startVideo"></source>
	</video>
</div>
</template>

<script>
	export default {
		name:"showVideo1",
		props:{
			
		},
		data(){
			return {
				videoOptions:{
					controls:true,
					src: "http://vfx.mtime.cn/Video/2019/03/21/mp4/190321153853126488.mp4"
				},
				player: null,
				playTime:"",
				seekTime:'',
				current:'',
			}
			
		},
		beforeRouteLeave(){
		 //
		},
		mounted() {
			this.initVideo();
		},
		 methods: {
		    initVideo() {
				//原生初始化视频方法
				let myVideo = this.$refs.video;
				// ontimeupdate
				myVideo.ontimeupdate = function() {myFunction()};
				let _this = this;
				function myFunction(){
					let playTime = myVideo.currentTime;
					setTimeout(function () {
					localStorage.setItem("cacheTime",playTime)
				},500);
				let time = localStorage.getItem("cacheTime");
				// 当前播放位置发生变化时触发。
				if(playTime - Number(time) > 30){
					myVideo.pause();
					myVideo.currentTime = Number(time);
					myVideo.play();
				}else{
				}
				};       
			},
			onPlayerPlay(player){
				this.globalSetting = true;
				document.getElementsByClassName("vjs-control-bar").style.display = "block";
			},
			onPlayerPause(player){
				this.globalSetting.controls = false;
				console.log("player pause!", player);
                var video = document.getElementById("video");
				video.controls=false;
				document.getElementsByClassName("vjs-control-bar").style.display = "none";
			},
			beforeDestroy() {
				if (this.player) {
					this.player.dispose()
				}
			}
	},
	}
</script>
<style>
	
</style>

2.在弹窗中运用视频组件

此处需要注意我们的视频一旦播放，关闭弹窗也无法停止，因此我们采用element-ui弹窗中的打开和关闭属性来操作视频

<template>
<div @click = "videoShow()">点击播放视频</div>
	<el-dialog :visible.sync="show" width="70%" :append-to-body="true" 
		@close="startVi()"
		@open="startVi()">
			<div style="min-height: 500px;">
				<showVideo1 ref="showVideo1"></showVideo1>
			</div>
		</el-dialog>
</template>
<script>
import showVideo1 from "video_1.vue";
export default {
  props: ["home"],
  components:{
		showVideo1
		},
  data() {
    return {
		show:false
	}
    },
  methods:{
  	videoShow(){
  		this.showVideo1 = true;
  	},
  	//关闭弹窗则暂停并且重置视频
  	startVi(){
  		document.getElementById('myVideo1').currentTime=0;
		document.getElementById('myVideo1').pause();
  	}
   }
</script>

3.小结

创建好的播放器存在关闭弹窗后继续播放的缺陷，因此我们利用了数据绑定来获取我们设计的播放器组件的属性和方法，并在父组件进行调用来重置播放器的视频播放。