【解决】uniapp使用video标签在浏览器调试正常，安卓真机、手机上显示小黑块，无法正常显示-Toy模板网

这篇具有很好参考价值的文章主要介绍了【解决】uniapp使用video标签在浏览器调试正常，安卓真机、手机上显示小黑块，无法正常显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【问题】 uniapp中使用video标签展示视频，在浏览器展示正常，但是运行到安卓真机、或者手机上显示小黑块，无法正常显示

示例代码如下：

<video 
	preload="auto"
	autoplay="autoplay"
	:src="`${imgUrl}${item.rowId}?appToken=${appToken}`"
	// 完整src示例如下：
	// http://192.168.xx.xx:8888/file/api/v1/file/preview/adadad9d-5aad-4aac5-bd59-2a012f71d6cc
	>
</video>

展示效果如下：

uniapp video 黑屏,uniapp,JavaScript,uni-app,前端,javascript

【解决】

不在< template >标签内直接使用< video >标签，而是使用v-html渲染html元素，绑定一个videoHtm方法，返回需要的html元素，示例代码如下：

<view v-html="videoHtm(item)"></view>

videoHtm(item){
	return `<video controls="controls" controlslist="nodownload" width="100%" height="calc((100Vw - 80upx) / 3)"><source src="${this.videoUrl}${item.rowId}" type="video/mp4"></video>`
}
// 完整src示例如下：
// http://192.168.xx.xx:8888/file/api/v1/file/preview/adadad9d-5aad-4aac5-bd59-2a012f71d6cc