详细问题描述
App nvue 安卓端video标签对于m3u8(HLS)的#EXT-X-DISCONTINUITY标签处理存在问题,在不同片段间seek的时候会报network error,而正常播放可以完整地播放全部片段。微信小程序不存在该问题(基础库2.10.4)。
重现步骤
- 在nvue页面中使用video标签播放带有#EXT-X-DISCONTINUITY标签的HLS流(安卓端,iOS未测试)
- 测试视频地址:http://1301409604.vod2.myqcloud.com/d9f276fevodcq1301409604/1063d9a05285890801315080615/playlist_eof.m3u8
- 调用videoContext.seek()跳转至下一片段的时间点
- 测试时间点为28秒处:videoContext.seek(28)
[结果]
error callback被触发,提示network error
[期望]
正常跳转至指定时间并继续播放
IDE运行环境说明
HBuilderX 2.6.1
Max OS X 10.14.2
uni-app运行环境说明
Android APP
HBuilderX创建的项目
编译模式说明:自定义组件模式,v3编译器,nvue编译模式为uni-app
App运行环境说明
Android版本号:10
MIUI版本号:MIUI V11.0.4 稳定版
手机型号:MI 9
附件
[可重现代码片段]
<template>
<video
class="player"
ref="myVideo"
id="myVideo"
:src="url"
:style="{width: `${windowWidth}px`, height: `${windowHeight}px`}"
:controls="false"
:autoplay="false"
@timeupdate="_timeupdate"
>
<slot></slot>
</video>
</template>
<script>
export default {
props: {
autoplay: {
type: Boolean,
default: true
},
src: {
type: String
}
},
watch: {
src(val) {
if (val && val.length > 0) {
this.url = val
if (this.autoplay) {
setTimeout(() => {
this.videoContext.play()
}, 200)
}
}
}
},
data() {
return {
windowWidth: 0,
windowHeight: 0,
url: '',
}
},
methods: {
seek(millis) {
this.videoContext.seek(millis / 10)
},
play() {
this.videoContext.play()
},
_timeupdate(evt) {
this.$emit('timeupdate', evt)
}
},
onReady() {
},
mounted() {
uni.getSystemInfo({
success: info => {
this.windowWidth = info.windowWidth
this.windowHeight = info.windowHeight
}
})
this.videoContext = uni.createVideoContext('myVideo', this.$vm)
}
}
</script>
<style lang="scss">
</style>
0 个回复