Question

我们的平台在android的webview内运行React Web应用程序。我需要为此特定应用程序创建视频播放列表播放器。由于我们需要支持所有范围的设备，因此有时会遇到更高级别的设备或我的浏览器可能不会注意到的问题。这个问题尤其是-当我进入播放列表中的第9个视频（无论使用哪个视频文件）时，视频在播放承诺中引发了错误，“ play（）请求被暂停调用中断（）。”

这是一个熟悉的错误，但是在代码的任何地方都没有调用pause（）。我认为此错误是正确的，但是调用pause（）的内容尚不清楚。在我的兔子洞挖掘中，我很好奇不同设备是否对可以打开多少个TCP连接有某种限制。

浏览器在这里没有任何问题。播放列表视频播放器看起来很原始。仅在设备上才会发生错误。

我尝试了播放，暂停，设置currentTime和加载-进行了很多更改。我现在已经消除了设备上的一些错误，但是这个错误仍然存在。一些代码似乎是多余的-乐于解释任何看起来不妙的细节。

注意：播放列表将与具有相同播放列表的其他设备同步。为了使同步正常进行-我需要动态收集播放列表的持续时间，因为播放列表由于多种原因而有所不同-因此，我渲染了n个视频元素以获取元数据。然后根据状态隐藏/显示视频元素并播放/暂停视频元素。

我尝试获取数据-然后一次仅渲染两个视频元素（第二个视频将是下一个视频，以缩短视频播放之间的加载时间），但这并不能解决问题。

视频元素

<video
    className={styles.attractPlayer}
    id={`video-${index}`}
    key={index}
    style={{ visibility: this.props.showPlayer && this.state.playingVideo === index ? 'visible' : 'hidden' }}
    src={`${videoSource}.mp4`}
    type="video/mp4"
    poster={black}
    muted
    onLoadedMetadata={() => this.getVideoDuration(`video-${index}`)}
    onEnded={() => this.handleVideoEnd()}
/>

处理视频结束功能

    handleVideoEnd = async () => {
        const { playingVideo } = this.state

        let nextVideoID = (playingVideo + 1 <= this.playlist.length - 1) ? playingVideo + 1 : 0,
            nextVideo = document.getElementById(`video-${nextVideoID}`)

        if(nextVideoID === 0) console.log('Playlist restarted')

        await this.setState({playingVideo: nextVideoID})
        await this.resetFrame(nextVideo)
        console.log('Playing video:', this.playlist[nextVideoID], `- Duration:`, Math.floor(nextVideo.duration))
    }

重置框架功能（实际上调用play（））

    resetFrame = async (video, onSync = false) => {
        if(video.currentTime > 0) {
            video.currentTime = 0
            console.warn('Video time reset')
        }
        if(!onSync) await video.load()
        await video.play()
            .catch(e => console.warn(`Error Message: ${e.message} | Error Code: ${e.code}`, video))
        if(video.paused) console.log('Video is paused')
    }

预期行为上一个视频结束，下一个视频开始。（在浏览器/高端设备中工作）如果播放列表结束，则此处还会有一些同步逻辑，这些逻辑可使所有设备对齐，以便同时播放视频。很好有一个后备功能，如果由于任何原因错过了同步机会，播放列表将自行重启。

实际行为与上面相同，除了有问题的设备抛出错误（暂停播放中断，错误代码20）-根据设备，它出现故障的位置是恒定的。该设备每次都会在第9个视频上发生故障。如果失败，则将视频放置在第9首曲目之前可以正常播放。

我假设视频无法播放，因此播放立即被暂停和中断。假设文件本身没有问题，这会导致什么？

更新：

切换到使用video.js-引发的错误有所不同，但与我所怀疑的相似。 “由于损坏问题或媒体使用的浏览器不支持的功能，媒体播放被中止了” 问题是，如果在播放列表的较早位置使用了该视频，该视频就可以正常工作...每个视频都在同一点抛出相同的错误，无论：/

视频元素在Android设备上意外暂停

0 个答案: