小程序上，如何实现播放课程不可以拖动，切到后台报警并停止播放？

发表时间：2026-4-15

发布人：葵宇科技

浏览次数：55

在微信小程序实现课程视频不可拖动、切后台立即报警并停止播放，核心是：用 enable-progress-gesture="false" + 遮罩防拖动；监听 onHide 切后台，调用 pause() + 弹窗 / 震动报警；同时禁用小窗、禁止后台音频。下面是完整可直接复用的方案。

一、禁止拖动进度条（双重保险）

1. 原生 video 组件配置（WXML）

<video   
id="courseVideo"   
src="{{videoUrl}}"   
controls   
enable-progress-gesture="{{false}}"  <!-- 禁止拖动手势 -->   
show-bottom-progress="{{true}}"       <!-- 保留进度条显示 -->   
auto-pause-if-navigate="{{true}}"     <!-- 跳转页面自动暂停 -->   
auto-pause-if-open-native="{{true}}"  <!-- 跳微信原生页自动暂停 -->   
picture-in-picture-mode="none"        <!-- 禁用画中画小窗 -->   
bindtimeupdate="onTimeUpdate" >
</video>  <!-- 遮罩层：覆盖进度条区域，防止误触拖动 --> 
<cover-view class="progress-mask">
</cover-view>

2. 遮罩样式（WXSS）

.progress-mask {   position: absolute;   bottom: 0;   left: 0;   width: 100%;   height: 60rpx;  /* 覆盖进度条高度 */   background: rgba(0,0,0,0.01);  /* 透明但可拦截点击 */   z-index: 999; }

3. 关键说明

enable-progress-gesture="false"：官方属性，直接禁用进度条拖动。
遮罩层：防止部分机型 / 版本下手势失效，双重保障。
picture-in-picture-mode="none"：彻底关闭小窗，避免后台继续播放。

二、切后台报警 + 停止播放（核心逻辑）

1. 页面 JS 逻辑（.js）

Page({
	data: {
		videoUrl: 'https://xxx.mp4',
		isPlaying: false
	},
	onLoad() { // 获取视频上下文     
		this.videoCtx = wx.createVideoContext('courseVideo', this)
	},
	// 监听切后台（最可靠）  
	onHide() {
		if (this.data.isPlaying) {
			// 1. 立即停止播放       
			this.videoCtx.pause()
			this.setData({
				isPlaying: false
			}) // 2. 触发报警：弹窗 + 震动       
			wx.showModal({
				title: '警告',
				content: '课程不可后台播放，请返回前台继续学习',
				showCancel: false,
				confirmText: '知道了'
			}) wx.vibrateShort({
				type: 'heavy'
			})
			// 震动提醒     
		}
	},
	// 监听切回前台（可选：自动续播）   
	onShow() {
		// 可根据业务决定是否自动续播     
		// this.videoCtx.play()   
	},
	// 监听播放状态更新   
	onTimeUpdate(e) {
		this.setData({
			isPlaying: true
		})
	}
})

2. 全局禁用后台音频（app.json）

防止视频音频在后台偷偷播放：

{ "enableBackgroundAudio": false }

三、进阶加固（防作弊）

1. 禁止全屏拖动

<video ... vslide-gesture="{{false}}"  vslide-gesture-in-fullscreen="{{false}}"  ></video>

2. 监听页面卸载（onUnload）

onUnload() { this.videoCtx.stop() // 彻底停止并释放资源 }

3. 服务端校验（推荐）

前端上报播放时长 / 进度，服务端校验是否连续。
若出现跳变或后台时长异常，标记为异常学习记录。

四、UniApp 适配（若用 UniApp）

<template>
	<view>
		<video id="courseVideo" :src="videoUrl" controls :enable-progress-gesture="false" :picture-in-picture-mode="'none'"></video>
		<cover-view class="progress-mask"></cover-view>
	</view>
</template>
<script>
	export default {  
	      onHide() {     
	        const videoCtx = uni.createVideoContext('courseVideo', this)     
	        videoCtx.pause()     
	        uni.showModal({ title: '警告', content: '不可后台播放' })     
	        uni.vibrateShort()  
	      } 
	    } 
</script>