解决h5嵌入app后video标签poster不能显示视频第一帧(表现为空白)

  这里我们先来描述一下问题,页面中使用了video标签,按照video标签的官方介绍下图介绍:

                      

 

  没有设置poster的情况下在浏览器中我们可以看到视频的第一帧,页面效果如下图左图所示;但是嵌入App后,右面的样子:  

                                                                 

 

  这个时候我能想到的就是设置一下 poster 为某张固定图片,看看是不是poster 出了问题,我进行了下面的设置,并且得到了下面的效果:

<video poster="./img/cat.png" controls="controls" :src="item.fileUrl" :alt="item.fileName"/>

  

  现在就发现了这是poster的问题,接下来展示视频中的某一帧,我们可以参考阿里云文档的视频截帧(https://help.aliyun.com/document_detail/64555.html?spm=a2c4e.11153940.0.0.c1034696M91eGA)

   

 

 

  按照文档中的示例,我们对video标签进行如下操作:

<video :poster="item.fileUrl+'?x-oss-process=video/snapshot,t_50,f_jpg,w_400,h_350'"  controls="controls" :src="item.fileUrl" :alt="item.fileName"/>

  这样我们就可以展示视屏中第50ms那一帧的画面了,效果如下:

    

 

posted @ 2020-03-22 13:09  刘彤彤  阅读(9902)  评论(1编辑  收藏  举报