2***@qq.com
2***@qq.com
  • 发布:2019-11-10 20:12
  • 更新:2019-11-10 20:14
  • 阅读:857

【报Bug】nvue uniapp 编译模式 createVideoInstance,play()不起作用,仅 iOS 有该问题,同样代码在 android 以及 H5 上都正常

分类:nvue

详细问题描述

nvue uniapp 编译模式,uni.createVideoInstance(id, this).play()不起作用,仅 iOS 有该问题,同样代码在 android 以及 H5 上都正常

[内容]

如下代码,预期触发事件的时候,video 停止播放。

        <video id="course_video_1" ref="course_video_1" v-if="isVideoVisible || !ifControlVideoVisibility"  
          :style="[videoStyle]"  
          :objectFit="videoObjectFill"  
          :autoplay="isAutoplay && isVideoPlaying" direction="-90"  
          x5-video-player-type="h5"  
          :controls="true"   
          @error="videoErrorCallback"  
          @fullscreenchange="onFullScreenChange"  
          @timeupdate="onTimeUpdate"  
          @play="videoOnPlay"  
          @pause="videoOnPause"  
          @ended="onEnded"  
          :src="mediaUrl"  
          :initial-time="mediaStartTime"  
          :poster="mediaPosterUrl"  
        >  
        </video>  

<view @click="videoButtonPlayClick"><text>click me</text></view>

  mounted() {  
    this.getVideoContext();  
  }  

  getVideoContext() {  
    let videoPlayerInstance = undefined;  
    try {  
      videoPlayerInstance = uni.createVideoContext('course_video_1', this);  
      if (videoPlayerInstance) {  
        console.log('video player instance created', videoPlayerInstance);  
        this.videoPlayerInstance = videoPlayerInstance;  
      }  
    } catch(e) {}  
    return videoPlayerInstance  
  },  

 videoButtonPlayClick() {  
    console.log('video button click: play', this.isVideoPlaying, this.videoPlayerInstance);  
    if (this.isVideoPlaying) this.videoPlayerInstance.pause();  
    else this.videoPlayerInstance.play();  
  },  

[步骤]

运行程序,点击按钮“click me”,预期视频播放状态变化(如播放则停止,如停止则播放)。

[结果]

iOS 上视频行为没有变化,不报错。android 上行为符合预期,H5 端行为符合预期。
android 和 iOS 通过console.log打印出来的this.videoPlayerInstance的值类似,如下:

{
"id": "course_video_1",
"ctx": {
"ref": "1701",
"type": "u-video",
"attr": {
"id": "course_video_1",
"objectFit": "cover",
"autoplay": true,
"direction": "-90",
"x5VideoPlayerType": "h5",
"controls": true,
"src": "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4",
"initialTime": 130,
"poster": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png"
},
"style": {
"width": "375px",
"height": "211px"
},
"event": ["error", "fullscreenchange", "timeupdate", "play", "pause", "ended"]
}
}

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

HBuilder, 2.3.7.20191024编译调试,vscode 写码

[IDE版本号]

[windows版本号]

[mac版本号]

MacOS 10.14.6

uni-app运行环境说明

[运行端是h5或app或某个小程序?]

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
HBuilderX

[编译模式是老模板模式还是新的自定义组件模式?]
自定义组件

App运行环境说明

[Android版本号]
华为 Mate20 Pro,软件最新,运行结果符合预期

[iOS版本号]
模拟器,iPhone 11Pro iOS 13
真机,iPhone 6, iOS 12.4.2
两个 iOS 测试设备,运行结果均不符合预期

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]
1931997168

Dennis

2019-11-10 20:12 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com (作者) - Let's go!

哦,对了,测试中,isPlaying参数没有问题;也单独调用过this.videoPlayerInstance.pause(); 但iOS 视频继续播放,没有停止。望官方解决。

该问题目前已经被锁定, 无法添加新回复