解決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那一幀的畫面了,效果如下:

    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM