腾讯播放器TCPlayer 报错：The element type must be ＜video＞的解决方法。

fei-好好学习

已于 2022-09-28 14:03:43 修改

阅读量3.4k

点赞数

分类专栏： Vue 文章标签： javascript 腾讯云

于 2022-09-23 14:38:48 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46743083/article/details/127009985

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在uniapp项目中使用腾讯TCPlayer播放器遇到的错误：元素类型必须是<video>。解决方案是在HTML中创建一个div，然后通过JavaScript动态插入video元素，并设置相关属性。最后，根据腾讯文档配置播放器并添加视频源，成功解决报错问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：这里的项目是用uniapp编写h5项目，但是对于vue项目和pc端应该都是可行的可以进行参考解决问题的。

在使用腾讯TCPlayer播放器时，出现了报错信息：
Uncaught (in promise) TypeError: The element type must be <video>.
在这里插入图片描述
报错的信息是说这个元素只能是存放video元素。

解决方法：

这里可以在html元素上先写一个div标签，这个div添加一个id名为video-content-box(id名字可以自定义).
js里面添加代码，为上面这个div添加一个元素，代码如下：

 const video = document.createElement("video")	
	video.setAttribute("id", "player-container-id");
	video.setAttribute('playsinline',true);
	video.setAttribute('webkit-playsinline',true)// video的属性
	document.getElementById("video-content-box").appendChild(video);//为这个盒子中添加一个video元素

对于video的属性，可以参考腾讯文档：
在这里插入图片描述
3. 最后再给腾讯的播放器添加url链接播放即可

var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中一致
player.src(this.livePlayUrl); // url 播放地址

这里要注意的是需要按照文档进行编写，把一些sdk以及script链接给引进来

文章讲解完毕。¹

谢谢 ↩︎