【問(wèn)題】 uniapp中使用video標(biāo)簽展示視頻,在瀏覽器展示正常,但是運(yùn)行到安卓真機(jī)、或者手機(jī)上顯示小黑塊,無(wú)法正常顯示
示例代碼如下:
<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>
展示效果如下:
【解決】
不在< template >標(biāo)簽內(nèi)直接使用< video >標(biāo)簽,而是使用v-html
渲染html元素,綁定一個(gè)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
出現(xiàn)該問(wèn)題的原因可能是video的視頻流不兼容或者uniapp的video標(biāo)簽不是普通的html5自帶的video。
可參考:uniapp-video文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-757475.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-757475.html
到了這里,關(guān)于【解決】uniapp使用video標(biāo)簽在瀏覽器調(diào)試正常,安卓真機(jī)、手機(jī)上顯示小黑塊,無(wú)法正常顯示的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!