這里我們先來描述一下問題,頁面中使用了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那一幀的畫面了,效果如下: