vue-video-player 小白笔记

<template>
	<video-player class="video-player-box"
	 ref="videoPlayer"
	 :options="playerOptions"
	 :playsinline="false"
	 customEventName="customstatechangedeventname"
	 @play="onPlayerPlay($event)"
	 @pause="onPlayerPause($event)"
	 @ended="onPlayerEnded($event)"
	 @loadeddata="onPlayerLoadeddata($event)"
	 @timeupdate="onPlayerTimeupdate($event)"
	 @ready="playerReadied($event)">
	</video-player>
</template>

<script>
	export default {
		data() {
			return {
				playerOptions: {
					// videojs options
					muted: true,//默认静音
					language: 'en',
					playbackRates: [0.7, 1.0, 1.5, 2.0],//播放倍速
					sources: [{
						type: "video/mp4",//资源类型
						src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"//资源路径
					}],
					poster: "/static/images/author.jpg",//封面图
				},
				canplay:false,//资源是否可播放
			}
		},
		mounted() {
			console.log('this is current player instance object', this.player)
		},
		computed: {
			// 视频对象
			player() {
				return this.$refs.videoPlayer.player
			}
		},
		methods: {
			// 播放器初始化完成
			playerReadied(player) {
				console.log('the player is readied', player)
				// you can use it to do something...
				// player.[methods]
			},
			// 音视频资源加载完毕 如果不可在线播放 可通过此方法判断是否可以开始播放给用户提示
			onPlayerLoadeddata(player) {
				// 方法调用即资源加载完毕可进行播放
				this.canplay = true;
				// 获取资源总时长
				let duration = player.cache_.duration;
			},
			// 音视频资源开始播放触发
			onPlayerPlay(player) {
				console.log('player play!', player)
			},
			// 音视频资源暂停播放触发
			onPlayerPause(player) {
				console.log('player /pause!', player)
			},
			// 视频播放进度变化
			onPlayerTimeupdate(player) {
			//获取当前播放进度
				let currentTime = player.cache_.duration;
				console.log(currentTime)
			},
			// 视频时间转换成时分秒格式
			getTime(seconds) {
				if(!seconds || seconds<=0) return "00:00:00";
				if(seconds<=60){//小于1分钟
					let t = parseInt(seconds),
						s = t<10? '0' + t : t;
					return `00:00:${s}`;
				}else if(seconds < 60*60){//小于一小时
					let t = parseInt(seconds/60),
						s = t<10? '0' + t : t;
					return `00:${s}:${seconds%60}`
				}
			},
			// 常用属性
			// 改变播放速度  例：2倍速 this.player.playbackRate(2)
			// 改变播放进度 例：播放5秒 this.player.currentTime(5)
			// 暂停视频 this.player.pause()
			// 播放视频 this.player.play()
			// 切换音视频资源路径 this.playerOptions['sources'][0]['src'] = "http:url...."
		},
	}
</script>

<style>
</style>