iPad上的HTML5视频

我有一个动态视频库，它在电脑上效果很好。移动到iPad时，视频开始加载，并显示无法播放图标。取而代之的是，我宁愿视频直到准备好播放才显示。我曾尝试添加“canplaythrough”和“canplay”的事件监听器，并在视频淡入时再播放。 iPad不支持这些事件吗？iPad上的HTML5视频

new_video = document.createElement('video'); 
new_video.setAttribute('class', 'none'); 
new_video.setAttribute('width', '568'); 
new_video.setAttribute('height', '269'); 
new_video.setAttribute('id', 'video'+video_num); 
current_video.insertBefore(new_video, video_controls); 
new_video.load(); 
new_video.addEventListener('canplaythrough', function() { 
    $('#video'+video_num').fadeIn(100); 
    new_video.play(); 
});

来源

2010-05-25 mrollinsiv

你的视频使用什么编解码器？ Safari和Firefox在它们都支持的视频编解码器上有所不同。（尽管希望谷歌即将改变这种情况） – Earlz 2010-05-25 21:39:52

我使用h.264 – mrollinsiv 2010-06-01 21:59:01

在ipad上可靠的视频是最难以想象的混乱 - 我必须拿出惊人的变通办法数量令我感到惊讶 – 2014-10-02 03:11:44

检查，看看您是否尝试加载之前，浏览器可以播放视频：

function canPlayVorbis() { 
    var v = document.createElement('video'); 
    return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora, vorbis"').replace(/no/, '')); 
} 

function canPlayMP4() { 
    var v = document.createElement('video'); 
    return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, '')); 
} 

function canPlayWebM() { 
    var v = document.createElement('video'); 
    return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, '')); 
}

从Dive Into HTML5 Appendix A服用。

来源

2010-05-27 07:41:10 robertc

不幸的是，这不是问题。 iPad支持h.264视频，这就是我正在加载的视频。问题是，当视频加载时，它显示只有加载足够的时间才能播放标志。我想一直隐藏这个视频元素，直到它准备好一直播放为止 – mrollinsiv 2010-06-01 22:00:19

在这种情况下，您可能需要以某种方式隐藏该元素并查询就绪状态（不知道它的支持程度如何）：http：// dev.w3.org/html5/spec/video.html#the-ready-states – robertc 2010-06-01 23:22:58

在iPad上，它将不会加载视频，直到用户启动一个事件，这是由苹果设计的，以防止iPhone或iPad用户烧毁他们的数据计划。所以你不能做你想抱歉的事情。

查看此link并查找设备特定注意事项部分的某些信息。但它不会开始加载数据，因此无法触发canplaythrough事件，直到用户触摸它为止。

来源

2010-06-03 17:32:21

正确的我得到的，所以会发生什么是我叫new_video.load（）;用户点击视频后。之后，我附加了事件监听器。理论上这应该起作用，因为一旦用户点击视频，它就会调用加载，然后添加所有的事件监听器。 – mrollinsiv 2010-06-04 15:58:42

当你调用load之后，用户点击它会尽快开始播放的视频。我不认为这些事件会以这样的方式触发，从而使您淡入视频。 – 2010-06-04 18:53:05

这个答案看起来是正确的 - 我只有在用户点击视频后才能看到canplay和canplaythrough事件。 – 2013-01-29 12:29:16

在iPad/iPhone的自动启动播放器：

function fakeClick(fn) { 
    var $a = $('<a href="#" id="fakeClick"></a>'); 

    $a.bind("click", function(e) { 
     e.preventDefault(); 
     fn(); 
    }); 

    $("body").append($a); 

    var evt, 
     el = $("#fakeClick").get(0); 

     if (document.createEvent) { 
      evt = document.createEvent("MouseEvents"); 
      if (evt.initMouseEvent) { 
       evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
       el.dispatchEvent(evt); 
      } 
     } 

     $(el).remove(); 
} 

$(function() { 
    var video = $("#mobileVideo").get(0); 

    fakeClick(function() { 
     video.play(); 
    }); 
});

来源

2010-06-14 21:37:34

刚刚测试过它。不再工作，[据称从iOS 4.X开始]（http://stackoverflow.com/questions/3009888/autoplay-audio-files-on-an-ipad-with-html5/3056220#3056220）。 – feklee 2011-08-20 10:12:14

解决这个视觉问题的办法是隐藏视频元素，直到它已准备好进行播放。请注意，您无法设置display:none（如果您这样做，视频将无法加载），visibility:hidden也无法解决问题。

要修复此问题，请将视频元素用overflow:hidden包裹在DIV上，并设置-webkit-transform:translateX(1024px)（数字足够高，以将视频推到屏幕外）。

比你要监听canplay或canplaythrough或load事件（根据您的需要），之后设置translateX为零。

来源

2011-03-29 04:11:45

与答案没有直接关系的两件事： - 不是改变视频的不透明度，而是改变视频元素顶部的叠加层的不透明度。（如果GPU加速未启用，则不透明度在谷歌浏览器上的视频元素上不起作用） - 避免使用'setAttribute'，改用DOM属性：'video.id'，'video.className'，'video.width '等等。 – 2011-03-29 04:16:25