uni-app uni.createVideoContext("myVideo") 在H5上未定义BUG

uni-app uni.createVideoContext(“myVideo”) 在H5上未定义BUG

| 开发环境       | 版本号 | 项目创建方式 |
|----------------|--------|--------------|
| Windows        | win10  | HBuilderX    |

# 产品分类
uniapp/H5

# 浏览器平台
Chrome  
87.0.4280.141  

# App下载地址或H5网址
[无](//ask.dcloud.net.cn/无)

## 示例代码：

```html
<video id="myVideo"  
class="video"  
controls="false"
loop="true"
src="video.src">
    </video>  

<p>Ready(res){<br>
this.videoContext = uni.createVideoContext("myVideo")<br>
},<br>
methods:{<br>
player(){<br>
console.log('player')<br>
console.log(this.videoContext)<br>
this.videoContext.play();<br>
},<br>
pause(){<br>
console.log('pause')<br>
this.videoContext.pause();<br>
}<br>
}</p>

bug描述：

this.videoContext = uni.createVideoContext(“myVideo”) 创建后调用this.videoContext 在H5上undefined,微信小程序上调用play()无法播放视频


更多关于uni-app uni.createVideoContext("myVideo") 在H5上未定义BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni.createVideoContext("myVideo") 在H5上未定义BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在H5平台使用uni.createVideoContext时，常见问题及解决方案如下：

  1. 组件ID匹配问题：确保video组件的id属性与createVideoContext传入的ID完全一致。注意H5平台对大小写敏感，建议统一使用小写ID。

  2. 组件渲染时机：在onReady生命周期中调用createVideoContext，确保视频组件已渲染完成。避免在组件未挂载时创建上下文。

  3. 平台差异处理：H5平台依赖原生HTML5 Video API，部分方法（如播放控制）可能受浏览器策略限制。建议添加错误捕获：

this.videoContext = uni.createVideoContext("myVideo", this)
if(this.videoContext){
  this.videoContext.play().catch(e=>console.log('播放失败:',e))
}

  1. 微信小程序兼容性：若同时需要兼容小程序，检查视频源格式（建议使用MP4格式）和域名白名单配置。

  2. 备选方案：对于H5平台可直接操作DOM：

const videoEl = document.getElementById('myVideo')
videoEl?.play()
回到顶部