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视频 - 只在作物选择范围内显示视频

回答

相关问题