Vue video标签poster属性在安卓微信中不生效问题解决

poster属性

这是用来引用video的封面图片的!!!!!

style="object-fit:cover"

其实你还可以改变属性的值,比如说:

style="object-fit:fill"

会拉伸图片,,,,,


<video width="100%" height="100%" controls="controls" poster="封面图地址" style="object-fit:cover">
    <source src="视频地址">
 	你的浏览器不支持HTML5视频。
</video>

最近在开发一个视频模块时,遇到不少的坑,因为video在目前移动端兼容性存在不少问题。

问题:安卓手机在微信端poster属性不生效,图片不显示,显示黑屏。

预期效果是视频未播放时,展示预设的图片,通过video的poster属性设置,测试发现在安卓微信X5内核浏览器,图片无法显示,代码如下:

<video :poster="videoObj.imageUrl" id="video" controls>
  <source :src="videoObj.videoUrl" type="video/mp4">当前浏览器不能支持视频播放,请采用chrome或IE9以上浏览器
 </video>

项目是vue项目,videoObj.imageUrl与videoObj.videoUrl分别是图片和视频链接。后通过一番资料搜索后,针对安卓微信X5内核,通过设置属性

x5-video-player-type="h5" 进行兼容处理。如下:

<video :poster="videoObj.imageUrl" id="video" controls x5-video-player-type="h5">
  <source :src="videoObj.videoUrl" type="video/mp4">当前浏览器不能支持视频播放,请采用chrome或IE9以上浏览器
</video>

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 点我我会动 设计师:上身试试 返回首页