为啥我的 jQuery 代码不更新加载到视频元素中的实时图像？

Posted 2023-03-05

【中文标题】为啥我的 jQuery 代码不更新加载到视频元素中的实时图像？

【英文标题】：Why doesn’t my jQuery code update live image loaded in a video element?为什么我的 jQuery 代码不更新加载到视频元素中的实时图像？

【发布时间】：2014-09-27 12:31:34

【问题描述】：

我有一个实时图像的 URL，我想将其显示为视频，但只显示第一帧而不是动画。我使用的是 Google Chrome 版本 36.0.1985.125。

我错过了什么？

<video id="one_frame_per_second"
       autoplay=autoplay 
       poster="http://ip.address/screensaver/now.jpeg"></video>

<script>
    $(document).ready(function() 
        $('#one_frame_per_second').show();

        mtimer = setInterval(function() 
            $('#one_frame_per_second').attr(
                'poster',
                'http://ip.address/screensaver/now.jpeg'
            );
        , 15);
    );
</script>

【问题讨论】：

您每 15 毫秒设置一次相同的 poster 属性，为什么？

因为 http://ip.address/screensaver/now.jpeg 是 JPEG 图像但实时更新，所以我需要每 15 毫秒渲染一次才能以无缝模式获取最新图像。

这是BUG吗？？？为什么不更新 now.jpeg 的最新版本？

在以前版本的 Google Chrome 版本 36.0.1985.125 中，这可以正常工作。一些废话删除或破坏了它。

有一个活生生的例子供我们使用吗？没有一个很难调试。

【参考方案1】：

请报告 Google Chrome、Canary、Opera、Firefox 以解决过去有效的此功能。

临时解决办法是：

<video id="one_frame_per_second"
       autoplay=autoplay 
       poster="http://82.143.92.19/video/now.jpeg" ></video>


<script>
  $(document).ready(function()
      $( "#one_frame_per_second" ).show();              
      var mtimer=setInterval(function()  
         $("#one_frame_per_second").attr('poster', 'http://82.143.92.19/video/now.jpeg?r'+Date.now());
       ,150);      
  );

</script> 

注意： ?r= Date.Now() ，缓存问题 + 最小间隔时间

【参考方案2】：

您能否提供这个实时图像以便我们进行测试，或者提供一个可以工作的 jsfiddle？

如果没有进一步的知识，我猜这是因为您设置了相同的来源。

你可以试试这个吗：

   mtimer=setInterval(function()  
    var video = $("#one_frame_per_second");      
    video.attr('poster', '');
    video.attr('poster', 'http://ip.address/screensaver/now.jpeg');
  ,15);

【讨论】：

我用 Google Chrome 版本 36.0.1985.125 和 Google Canary 尝试了您的示例，但仍然相同。但是，当我使用较少的 Google Chrome 版本 36 时，我或你的相同代码就可以工作。

你能提供一个有效的例子（或应该有效的例子）吗？

jsfiddle.net/ajn5ntcj - 不适用于 Google 36，但适用于旧版 Google

【参考方案3】：

尝试先构造函数，然后调用它

$(document).ready(function()
  $( "#one_frame_per_second" ).show();              

  var mtimer = function() setInterval(function()        
    $("#one_frame_per_second").attr('poster', 'http://ip.address/screensaver/now.jpeg');  
  ,15); 

  mtimer
);

另外，如果您仍然遇到错误，请尝试将计时器增加到 10000 之类的值，并在计时器内执行 console.log($("#one_frame_per_second").attr('poster', 'http://ip.address/screensaver/now.jpeg'); ) 以查看您是否遇到任何奇怪的错误

更新

好的，我想我已经成功了：http://jsfiddle.net/ajn5ntcj/3/

  $(document).ready(function()
      $( "#one_frame_per_second" ).show();              
      var mtimer= function()
        var video_t = $("#one_frame_per_second");      
        //video_t.attr('poster', '')
        video_t.attr('poster', 'http://82.143.92.19/video/now.jpeg')
        //console.log('here im again2')
      
      setInterval(mtimer,1000)
      //console.log('here im again')
  );

【讨论】：

jsfiddle.net/ajn5ntcj - 请注意这适用于旧版 Google，但不适用于最新版 Google chrome 和 canary

否 - 如果您使用 Google Chrome 最新版本和 Google Canary jsfiddle.net/ajn5ntcj/3进行测试，则无法正常工作@

【参考方案4】：

我认为它的帮助：

 <video id="one_frame_per_second"
       autoplay=autoplay 
       poster="http://82.143.92.19/video/now.jpeg" ></video>



     $(document).ready(function()
  $( "#one_frame_per_second" ).show();              
  var mtimer= function()
    var video_t = $("#one_frame_per_second");      
    video_t.attr('poster', 'http://82.143.92.19/video/now.jpeg')
    //console.log('here im again2')
  
  setInterval(mtimer,1000)

);