uniapp完成视频试看功能

可以使用uniapp Video组件提供的@timeupdate方法去拿到当前播放到的时间

1. html代码

<template>
	<video src="/static/mda-pasuqi06z2ig11x2.mp4" danmu-btn :danmu-list="danmuList" @play="playVideo" id="myVideo"
		@timeupdate="videoTimeUpdateEvent">
	</video>
</template>

2. js代码

data() {
			return {
				videoContext: {}, // 用于绑定视频标签
				isPaused: false, // 用于记录是否已经暂停
				danmuList: [{
						text: '第 1s 出现的弹幕', // 弹幕内容
						color: '#ff0000', // 弹幕字体颜色
						time: 1, // 弹幕在视频的那个时间段显示 
					},
					{
						text: '第 2s 出现的弹幕',
						color: '#ff0000',
						time: 2
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				]
			}
		},
		created() {
			// 创建视频实例指向视频控件
			this.videoContext = uni.createVideoContext('myVideo');
		},
		methods: {
			videoTimeUpdateEvent(e) { // 播放进度改变
				let currentTime = Number(e.detail.currentTime);
				if (currentTime >= 6) { // 6 视频播放到6s的时候停止
					this.videoContext.pause();
					this.isPaused = true;
				} else { // 视频回退6s以后接着播放
					this.videoContext.play();
					this.isPaused = false;
				}
			},
			playVideo() { // 用户点击播放按钮时触发的方法
				if (this.isPaused) {
					this.videoContext.pause();
					alert('请先开通会员')
					return false
				} else {
					this.videoContext.play();
				}
			},
		}