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

发表时间：2026-4-15

发布人：葵宇科技

浏览次数：0

在微信小程序实现课程视频不可拖动、切后台立即报警并停止播放，核心是：用 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>