详细问题描述
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
6***@qq.com
请问解决了吗
2021-08-30 16:09