微信内置浏览器无法自动播放下一个视频 uni-app

微信内置浏览器无法自动播放下一个视频 uni-app

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

示例代码：

<template> <view class="content"> <image class="logo" src="/static/logo.png"></image> <view class="play-video-box"> <view class="play-video-item" @click="handlePlayVideo"> <button type="primary">播放视频</button> </view> </view> </view> </template> <script> export default { data() { return { title: 'Hello', currentVideoId: 0, vList: [{ id: 0, url: 'https://www.w3school.com.cn/example/html5/mov_bbb.mp4', muted: false }, { id: 1, url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4', muted: false }], } }, methods: { handlePlayVideo() { this.playVideoById(0) }, onEnded(videoId) { this.playVideoById(1) }, playVideoById(videoId) { this.pauseAllVideos(); const videoIndex = this.vList.findIndex(video => video.id === videoId); if (videoIndex !== -1) { this.currentVideoId = videoId; this.$nextTick(() => { const videoPlayer = uni.createVideoContext('videoPlayer' + videoId, this); videoPlayer.play(); }); } }, pauseAllVideos() { this.vList.forEach(video => { const videoPlayer = uni.createVideoContext('videoPlayer' + video.id, this); videoPlayer.pause(); }); }, } } </script>

更多关于微信内置浏览器无法自动播放下一个视频 uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

官网人员关注看看

更多关于微信内置浏览器无法自动播放下一个视频 uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个是微信内置浏览器的限制吧？我看报错提示是要求需要用户手势触发，搜索也说是微信浏览器的限制


原生桥接是什么

回复 2***@qq.com: WeixinJSBridge呗，但没这个功能吧？微信官方很早出过这个公告了 https://developers.weixin.qq.com/community/develop/doc/000e640d77cfa001132a6cb8456c01?highLine=%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE

在微信内置浏览器中，视频自动播放和连续播放确实存在较多限制。主要问题在于微信浏览器对视频自动播放的严格管控。

从代码层面分析，您已经正确监听了@ended事件并尝试播放下一个视频，但微信浏览器通常会阻止这种自动播放行为。以下是几个关键点：

  1. 用户交互要求：微信浏览器要求视频播放必须由明确的用户手势触发。虽然第一个视频通过按钮点击播放符合要求，但通过ended事件自动播放下一个视频可能被阻止。

  2. 静音播放策略：建议将第一个视频设置为muted: true，静音视频在微信中更容易实现自动播放。可以在视频开始播放后再取消静音。

  3. 播放状态管理：在playVideoById方法中，建议先检查视频是否可播放：

videoPlayer.play().then(() => {
  console.log('播放成功')
}).catch(err => {
  console.log('播放失败', err)
})
回到顶部