收藏
回答

视频videoContext play方法在安卓上无效

问题模块
API和组件



使用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" />
  view>
   
   <view class="video-component" hidden="{{ true }}">
       <video
         id="{{ video.id }}"
         data-id="{{ video.id }}"
         controls="{{ true }}"
         bindplay="handleVideoPlayEvent"
         bindpause="handleVideoPauseEvent"
         bindended="handleVideoEndedEvent"
         bindfullscreenchange="handleVideoFullScreenEvent"
         src="{{ video.cdn_url }}"
         poster="{{ video.preview_pic_url }}" />
   view>
view>
 <view class="btn-area">
   <input bindblur="bindInputBlur"/>
   <button bindtap="handleTap" data-id="{{ Num }}">点击播放button>
view>
>

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;
}


最后一次编辑于  2017-12-06
回答关注问题邀请回答
收藏

4 个回答

  • 猫5号
    猫5号
    2018-08-29

    努比亚z11无法播放

    2018-08-29
    赞同
    回复
  • 不悔
    不悔
    2018-08-21

    小米手机的play()也无法播放视频

    2018-08-21
    赞同
    回复
  • hj
    hj
    2018-03-28

    我也遇到了这个问题,测试安卓机器,play()方法无法使用,苹果正常。

    2018-03-28
    赞同
    回复
  • 王哲
    王哲
    2017-12-07

    可复现的安卓设备:

    • 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

    2017-12-07
    赞同
    回复