我正在嘗試顯示許多視頻縮略圖/海報而不實際加載視頻。。。
我得到的基本信息如下：
<div class="col-sm-3" style="padding: 20px;" onclick='location.href="/videoDetails/{{ @video.ID }}"'>
<video width="100%" style="cursor:pointer;"
<source src="/{{ @video.path }}">
Your browser does not support the video tag.
</video>
</div>
這個洞是在一個foreach循環中的，這樣，它在一個頁面上可以加載100個視頻。。。
我現在的問題是，這變得超級慢，有更多的視頻有一次加載。。
現在我在StackOverflowthread上找到了這個答案，它說要在視頻標簽上使用屬性preload="none"。。。這似乎加快了加載速度（因為它不預加載視頻），但是，它根本不顯示任何圖像（預覽）。。
在我的例子中，沒有理由加載hole視頻，因為（正如你在代碼中看到的），當點擊div時，實際的視頻會顯示在另一個頁面上。
另外，為了確保你說對了，我想顯示視頻第一幀的自動預覽。我不能用poster屬性上傳單獨的圖像來顯示它，它必須是默認圖像。。
我有什么辦法可以做到這一點嗎？我也對Javascript/jQuery解決方案持開放態度。。。
您可以通過視頻源url中的append
#t獲得不同時間段的視頻幀。但是使用屬性preloadnone值就無法獲得視頻幀。所以您需要在preload屬性中使用metadata值。以下是可以在preload屬性中使用的三個值：無-提示瀏覽器，用戶可能不會觀看視頻，或盡量減少不必要的流量是可取的。
元數據—向瀏覽器提示用戶不需要視頻，但需要獲取其元數據（維度、第一幀、軌跡列表、持續時間等）。
自動提示瀏覽器，樂觀地下載整個視頻是可取的。-向瀏覽器提示樂觀地下載整個視頻被認為是可取的。
您可以用這三個值檢查以下結果。