解決移動端video標簽圖片無法顯示問題

嘗試了很多種方法， 發現有的已經失效了， 有的要轉換成canvas， 非常的麻煩， 那么， 有沒有簡單穩定的方法呢？ 其實是有的

1. 使用poster海報屬性

2. 自動播放后馬上停止

<video
    autoPlay
    onPlay={(e) => e.target.pause()}
>
    <source
        src={`${window.baseUrl}/fileserv/browse/${file_id}`}
        type="video/mp4"
    />
    <track default kind="captions" rclang="en" />
</video>

 另外說一下， 有幾種因素會導致視頻/圖片無法正常顯示

1. 安卓訪問http的圖片/視頻時無法顯示： 未在添加 AndroidManifest.xml文件中的 application 標簽添加android:usesCleartextTraffic="true"屬性

2.訪問https圖片/視頻 無法顯示

　　-  關閉referrer策略

在head標簽中添加

<meta name="referrer" content="no-referrer">

　　- https使用的ip地址 而不是域名  例如: https://172.168.1.1/api/image/123.png  改為 https://m.baidu/api/image/123.png

　　- https證書不安全, 這個只能購買安全的證書或者同時開啟http的服務器來訪問