Question

我在视频源上有Jcrop，<img src ="http://ip_address/stream"> html页面显示内部包含视频的容器，但它是静止图像。一旦我点击图片，它就会更新。单击/拖动以裁剪视频区域后，裁剪选区内的区域将显示视频更新。

我如何获得它以便视频流在进行裁剪选择之前和之后不断更新？

编辑：使用Inspect Element工具，在网络监视器上，无论是否进行选择，持续更新视频的页面的状态代码为：200 OK

如果视频除非点击之外没有更新的页面的状态代码为：304 Not Modified

Answer 1

为了每隔（比如说）1秒强制刷新一次图像，你需要：

使用javascript setInterval
如果文件名未更改，则缓存图像源

例如以下代码

<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">来访问它吗？

Jcrop on video - 仅在裁剪选择中显示视频

1 个答案: