报错内容: Uncaught TypeError: 没有为播放器指定容器。
- 报错场景:改版pc端使用vue框架滚动加载详情页新闻,新闻中含有视频,原来单篇新闻不报错,改为滚动加载后一直报错,查了许多都是说没有对应dom中的id,其实有时不然。

解决
// dom 设置动态id
<div :id="['J_prismPlayer'+index]" style="width: 100%;height: 675px; margin: 20px auto 0;"></div>
-
方法中id对应

-
关键步骤
// 同步执行并使用vue内置函数nextTick等dom渲染出来后再调用阿里云视频的方法
async mounted () {
await this.getData();
let that = this;
await this.$nextTick(function(){
console.log('2:nextTIck.',that.recommendList)
if(that.recommendList[0].mediaPath !== '' || that.recommendList[0].videoId !== '') {
that.playVideo();
that.hasVideo = true;
topBegin += 560;
}
})
总结: 报错的主要原因就是一开始在初始化的时候生成了
that.playVideo()(阿里云配置的方法),生成后没有找到dom中的对应id,所以导致报错。
在Vue改版的PC端新闻详情页中,由于采用滚动加载,导致含有视频的新闻报出UncaughtTypeError:没有为播放器指定容器的错误。问题的关键在于初始化时调用了播放器方法,但DOM尚未渲染完成。解决方案是使用$nextTick确保DOM渲染后再调用阿里云的视频播放方法,动态设置DOMid并正确匹配,从而解决了问题。


被折叠的 条评论
为什么被折叠?



