报错内容: 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,所以导致报错。