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

Posted 2023-02-25

【中文标题】Jcrop on video - 视频仅在裁剪选择中显示

【英文标题】：Jcrop on video - video displays only within crop selection

【发布时间】：2017-02-17 12:22:46

【问题描述】：

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

如何让视频流在进行裁剪选择之前和期间不断更新？

编辑： 使用 Inspect Element 工具，在 Network Monitor 上，无论是否做出选择，持续更新视频的页面的状态代码为：200 OK

而除非点击，否则视频不会更新的页面的状态代码是：304 Not Modified

【问题讨论】：

出于某种原因，它有时有效，有时无效。不知道为什么。

如果你使用img，它不会自动更新，你必须触发它（可能是javascript刷新源），如果图像名称/元数据保持不变，浏览器可能只是使用了缓存的图像（因此需要一个 cachebuster 查询字符串或类似的）

@Offbeatmammal 谢谢，赞成使用“自动”这个词。我如何刷新 javascript 以及什么是 cachebuster 查询字符串？还认为这可能与需要获取 CDN 脚本有关，因此会出现 GET http://...cdn_link... [HTTP1.1 304 NOT MODIFIED ..ms] 通知。

添加了一个例子，希望对下面有所帮助

【参考方案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"> 来访问它吗？