微信小程序js控制页面多个视频只能播放一个视频

资深前端攻城狮

于 2023-03-29 17:12:30 发布

阅读量508

点赞数 1

文章标签：微信小程序 javascript 音视频小程序

本文链接：https://blog.youkuaiyun.com/zwh2487577416/article/details/129841081

版权

该代码段展示了一个在微信小程序中使用HTML的video标签创建两个视频，并用JavaScript的wx.createVideoContext方法分别获取每个视频上下文，从而实现对视频1和视频2的播放和暂停控制。在playVideo1和playVideo2函数中，可以切换两个视频的播放状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// HTML
<video id="video1" src="path/to/video1.mp4"></video>
<video id="video2" src="path/to/video2.mp4"></video>

// JavaScript
Page({
data: {
video1Context: null,
video2Context: null
},
onReady: function () {
this.setData({
video1Context: wx.createVideoContext('video1'),
video2Context: wx.createVideoContext('video2')
})
},
playVideo1: function () {
this.data.video1Context.play()
this.data.video2Context.pause()
},
playVideo2: function () {
this.data.video2Context.play()
this.data.video1Context.pause()
}
})