使用wx.createVideoContext创建ctx对象，点击按钮执行ctx.play()方法，在iOS可以触发播放，在安卓上则不行。
以及，在调试工具中输出ctx对象，发现原型链上没有ctx方法。
另外，亲测：
wx.createVideoContext的构造时机没问题，在onReady和在onLoad中构造都一样
视频本身没有问题，在浏览器中可以访问。
基础库版本1.7.0，微信版本6.5.22，不会是版本过低的问题。
把video-compnent的hidden改为false，也不会解决问题。
以及，重点是：上上周这样的写法是没有问题的。。。这周就不行了
wxml：
<view class="section tc"> <view class="video-item"> <view data-id="{{ video.id }}" catchtap="handleTap" class="video-item-discover"> <image class="video-item-discover-bg" src="{{ video.preview_pic_url }}" /> <image class="video-item-btn" src="/images/write-question/ic-reload@3x.png" /> |
index.js
const config = { data: { Num: 12345, video: { id: 12345, preview_pic_url: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000', cdn_url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400' }, videoContextList: [] }, onLoad () { const { Num } = this.data; // this.videoContext = wx.createVideoContext(String(Num)); this.setData({ videoContextList: [ { id: Num, ctx: wx.createVideoContext(String(Num))} ] }); }, getVideoContext(id) { const { videoContextList } = this.data; // 对每一个video都按照单例模式设置 return videoContextList.find(video => video.id === id).ctx || wx.createVideoContext(String(id)); }, /** * 点击图片开始播放 * @param {*} event */ handleTap(event) { const { currentTarget: { dataset: { id }}} = event; const ctx = this.getVideoContext(id); console.log(ctx); // 点击图片时，必然是非全屏状态，此时必然没有播放，直接play即可 ctx.play(); }, /** * 视频播放事件处理函数 * 开始播放时自动全屏 * @param {*} event 播放 */ handleVideoPlayEvent(event) { const { currentTarget: { dataset: { id }}} = event; const ctx = this.getVideoContext(id); console.log(ctx); ctx.requestFullScreen(); }, /** * 视频暂停事件处理函数 * @param {*} event 暂停 */ handleVideoPauseEvent(event) { console.log(event); }, /** * 全屏事件处理函数 * @param {*} event 事件 */ handleVideoFullScreenEvent(event) { console.warn('handleVideoFullScreenEvent'); const { detail: { fullScreen }, target: { dataset: { id }} } = event; const ctx = this.getVideoContext(id); console.log(ctx); // 退出全屏时，若正在播放，则自动暂停，且跳到起始位置 if (!fullScreen) { ctx.seek(0); ctx.pause(); } }, /** * 视频播放到末尾的处理函数 * @param {*} event 自然播放结束 */ handleVideoEndedEvent(event) { console.log(event); }};Page(config); |
wxss样式
.video-item { width: 100%; height: 100%;}.video-item video { width: 100%; height: 100%;}.video-item .video-item-discover{ position: relative; width:100%; height:100%;}.video-item .video-item-discover .video-item-btn{ position: absolute; width: 70rpx; height: 70rpx; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100;}.video-item .video-item-discover .video-item-discover-bg{ width: 100%; height: 100%; filter: brightness(0.6);}.section.tc { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}.section.tc .video-item .video-item-discover{ width: 200px; height: 200px; flex-basis: 100vw; margin: 0 auto;} |
请问解决了吗
努比亚z11无法播放
小米手机的play()也无法播放视频
我也遇到了这个问题，测试安卓机器，play()方法无法使用，苹果正常。
可复现的安卓设备：
OPPO R9sk，Android 7.1.1，微信6.5.22
华为Honor 8，Android 7.0，微信6.5.22
魅蓝Note 3，Andorid 5.1，微信6.5.22
三星Galaxy S8+，Android 7.0，微信6.5.22