Jcrop視頻 - 只在作物選擇範圍內顯示視頻

我在視頻源上有Jcrop，<img src ="http://ip_address/stream"> html頁面顯示內部帶有視頻的容器，但它是靜止圖像。一旦我點擊圖片，它就會更新。一旦我點擊/拖動剪裁視頻區域，剪裁選區內的區域就會顯示視頻更新。Jcrop視頻 - 只在作物選擇範圍內顯示視頻

我該如何獲得它，以便視頻流在作物選擇前不斷更新？

編輯：使用檢查元素工具，網絡監視器，對於不斷更新的視頻頁面的Status Code不管作出的選擇是：200 OK

而對於與該頁面的狀態代碼視頻點擊除非不更新是：304 Not Modified

來源

2017-02-17 FullMetalScientist

出於某種原因，它有時會起作用，而不是其他時間。不知道爲什麼。 – FullMetalScientist

如果你正在使用'img'，它不會自動更新，你不得不觸發它（可能是JavaScript的刷新），如果圖像名稱/元數據保持不變，瀏覽器可能只是使用緩存圖像將需要一個cachebuster查詢字符串或類似的） – Offbeatmammal

@Offbeatmammal謝謝，upvoted使用「automagically」這個詞。我如何刷新javascript和什麼是cachebuster查詢字符串？同樣認爲這可能與需要提取的CDN腳本有關，因此，GET GET http：// ... cdn_link ... [HTTP1.1 304 NOT MODIFIED ..ms]通知。 – FullMetalScientist

爲了迫使圖像的刷新頻率（比方說）1-秒鐘你需要：

使用JavaScript setInterval
Cachebust圖像源，如果文件名後沒有改變

例如下面的代碼

<img id="vidimg" src="Assets/img.jpg"> 
<script> 
    setInterval(function(){ 
     document.getElementById("vidimg").src="Assets/img.jpg" + 
     "?cachebuster=" + Math.round(new Date().getTime()/1000).toString() }, 
    1000); 
</script>

setInterval(... ,1000);的內引起的功能重複每1000毫秒（每秒一次） - 您可能需要根據您使用的圖像源的下載速度/刷新率來調整。這個函數可以是內聯的，就像我在這裏所做的那樣，或者如果涉及更復雜的邏輯，則可以將其作爲一個命名函數和引用。

document.getElementById("vidimg").src="Assets/img.jpg"只需重新加載圖像源 - 如果圖像看起來與已經被緩存的圖像相同，這可能會導致瀏覽器嘗試變得聰明，因此您需要爲文件名添加一個隨機參數爲了強制它從服務器重新獲取，因此+ "?cachebuster=" + Math.round(new Date().getTime()/1000).toString()只是增加了一個基於當前時間的參數。

如果您的源代碼沒有文件名（例如您的問題中的示例），那麼添加cachebuster仍然可以工作。

由於我無法訪問您描述的來源，我無法對此進行測試，但理論上它應該可行。或者，您是否可以不使用<video src ="http://ip_address/stream">來訪問它？

來源

2017-02-17 20:28:53 Offbeatmammal

Jcrop視頻 - 只在作物選擇範圍內顯示視頻

回答

相關問題