Opera HTML5 video readyState == 2 而不是等于 4答案

【问题标题】：Opera HTML5 video readyState == 2 instead of equaling 4Opera HTML5 video readyState == 2 而不是等于 4
【发布时间】：2014-04-02 04:52:22
【问题描述】：

在其他 4 个主要浏览器（Chrome、Firefox、IE 和 Safari）上，readyState 变为 4，我的代码执行得很好。然而在 Opera 上，readyState 只达到 2 并且永远不会达到 4。

代码：

var createSeekslider = function() {
    if($atVideo[0].readyState == 4) {
        var videoDuration = $atVideo[0].duration;
        $seekSlider = $('.videoSeekslider').slider({
            orientation:'horizontal',
            range:'min',
            min:0,
            max:videoDuration,
            value:0,
            step:0.01,
            animate:true,

            slide: function(event, ui) {
                $atVideo[0].currentTime = ui.value;
            }
        }); //End of (seekslider).slider function       
        } else {
            setTimeout(createSeekslider, 150);
        }
    }
createSeekslider();

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery html html5-video readystate

【解决方案1】：

与其尝试捕捉 readyState 等于 4 的时刻，我建议稍微不同的策略 - 处理 canplaythrough 事件：

$atVideo[0].addEventListener('canplaythrough', function() {
  // actually, `$atVideo[0].oncanplaythrough = function()` should do fine too
  $seekSlider = $('.videoSeekslider').slider({
    orientation: 'horizontal',
    range: 'min',
    min: 0,
    max: this.duration,
    value: 0,
    step: 0.01,
    animate: true,
    slide: (function(event, ui) {
      this.currentTime = ui.value;
    }).bind(this)
  });
});

我怀疑您的问题与this issue 中描述的相同：简而言之，Opera 在开始加载视频后立即将readyState 设置为4 (HAVE_ENOUGH_DATA)，然后将其切换为2 (HAVE_CURRENT_DATA ) 当它的一些重要部分被加载时——这对于setTimeout 安排的检查来说太快了。

【讨论】：

$atVideo[0].addEventListener('canplaythrough', function()) 正是我所需要的！现在就像一个魅力！谢谢！