uniapp使用video标签无法播放视频出现黑屏问题处理

最新推荐文章于 2024-08-20 10:54:46 发布

Cheng Lucky

最新推荐文章于 2024-08-20 10:54:46 发布

阅读量1.4w

点赞数 8

文章标签： uni-app 音视频

本文链接：https://blog.csdn.net/weixin_44255044/article/details/129882950

版权

当uniapp使用video标签播放视频出现黑屏并报错时，问题可能源于视频流不兼容或F12下无法找到视频文件。通过使用Vue的computed计算属性生成video标签的HTML，并确保src和type属性正确设置，可以解决此问题。在示例中，videoHtml函数返回包含动态video源的HTML字符串，然后在视图中渲染，从而成功播放视频。

摘要由CSDN通过智能技术生成

uniapp使用video标签无法播放视频出现黑屏问题处理

问题出现情况

在这里插入图片描述
并且点击播放后出现报错

解决办法

问题出现的原因可能是video的视频流不兼容或者在f12下无法看见视频文件导致的,所有我们使用computed计算属性来解决这个问题

computed:{
	videoHtml: function() {
		return `<video  autoplay loop muted controls="controls" width="100%" height="870px"><source src="${this.videoSrc}" type="video/mp4"></video>`;
	}
}