uni-app video视频 stop方法不能停止视频播放 stop方法无效

uni-app video视频 stop方法不能停止视频播放 stop方法无效

开发环境 版本号 项目创建方式
Windows windows 11 HBuilderX

产品分类：uniapp/H5

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows 11

HBuilderX类型：正式

HBuilderX版本号：3.3.5

浏览器平台：Chrome

浏览器版本：96.0.4664.110

示例代码：

onReady:function(){
this.videoContext = uni.createVideoContext('myVideo') //获取视频元素
this.videoContext.play() //播放视频  
//3s后停止播放  
setTimeout(()=>{
    this.videoContext.stop()  //  无效  
                  //尝试写  this.videoContext.pause() 是有效的 ，就是stop停止视频无效  
},3000)  
},

操作步骤：

onReady:function(){
this.videoContext = uni.createVideoContext('myVideo') //获取视频元素
this.videoContext.play() //播放视频  
//3s后停止播放  
setTimeout(()=>{
    this.videoContext.stop()  //  无效  
                  //尝试写  this.videoContext.pause() 是有效的 ，就是stop停止视频无效  
},3000)  
},

预期结果：正常stop停止视频播放

实际结果：没有停止视频播放

bug描述：

onReady:function(){
this.videoContext = uni.createVideoContext('myVideo') //获取视频元素
this.videoContext.play() //播放视频  
//3s后停止播放  
setTimeout(()=>{
    this.videoContext.stop()  //  无效  
                  //尝试写  this.videoContext.pause() 是有效的 ，就是stop停止视频无效  
},3000)  
},

更多关于uni-app video视频 stop方法不能停止视频播放 stop方法无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

vue页面
mac Chrome浏览器：stop方法不可用
ios正常
微信小程序 和 andorid stop方法 跟 pause方法一样，不是停止

更多关于uni-app video视频 stop方法不能停止视频播放 stop方法无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你的描述，stop() 方法在 H5 平台无效，而 pause() 有效，这确实是 uni-app 在 H5 端的一个已知限制。

核心原因： uni-app 的 video 组件和 createVideoContext API 是对各平台原生视频能力的封装。在 H5 平台，其底层直接使用的是 HTML5 的 <video> 元素。然而，标准的 HTML5 <video> DOM 对象原生并没有 stop() 方法。只有 pause() 方法和设置 currentTime 属性来跳转进度。

官方文档说明： 查阅 uni-app 官方文档中关于 videoContext 的说明，可以看到 stop() 方法后面有明确的平台兼容性标注。它并非在所有平台都有效，其行为依赖于对应平台的原生实现。

解决方案： 在 H5 平台，你需要用 pause() 方法配合设置播放进度为 0 来模拟 stop() 的效果。

将你的代码修改如下：

setTimeout(() => {
  // 在H5平台，使用 pause() 并重置播放位置来模拟 stop()
  this.videoContext.pause();
  this.videoContext.seek(0); // 将播放进度跳转到开始位置
}, 3000);
回到顶部