iPad 上的 HTML5 视频答案

【问题标题】：HTML5 video on iPadiPad 上的 HTML5 视频
【发布时间】：2011-02-23 22:08:20
【问题描述】：

我有一个动态视频库，它在计算机上运行良好。移至 iPad 时，视频开始加载并显示无法播放图标。而不是这个，我宁愿视频在准备好播放之前不显示。我试图为“canplaythrough”和“canplay”添加事件监听器，当它们发生时让视频淡入然后播放。 iPad 不支持这些事件吗？

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();
});

【问题讨论】：

您的视频使用什么编解码器？ Safari 和 Firefox 在它们都支持的视频编解码器上有所不同。（尽管希望 Google 即将改变这一点）
iPad 上的可靠视频是最难以想象的混乱 - 我必须想出的解决方法之多让我吃惊

标签： video ipad html

【解决方案1】：

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

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。

【讨论】：

不幸的是，这不是问题所在。 iPad 支持 h.264 视频，这就是我正在加载的视频。问题是，当视频加载时，它会显示无法播放标志，直到加载足够多。我想把这个视频元素全部隐藏起来，直到它可以一直播放
在这种情况下，您可能需要以某种方式隐藏元素并查询就绪状态（不知道它的支持程度）：dev.w3.org/html5/spec/video.html#the-ready-states

【解决方案2】：

在 iPad 上，它不会加载视频，直到用户开始活动，这是 Apple 设计的，以防止 iPhone 或 iPad 用户烧毁他们的数据计划。所以你将无法做你想做的对不起。

查看此link 并查找特定于设备的注意事项部分以获取一些信息。但它不会开始加载数据，因此在用户触摸它之前它无法触发 canplaythrough 事件。

【讨论】：

是的，我明白了，所以我调用 new_video.load();用户点击视频后。之后，我附加了事件侦听器。这在理论上应该可以工作，因为一旦用户点击视频，它就会调用加载，然后添加所有事件监听器。
调用 load 后，用户点击视频，它会尽快开始播放。我不认为事件会以允许您淡入视频的方式触发。
这个答案似乎是正确的 - 我只有在用户点击视频后才能获得 canplay 和 canplaythrough 事件。
您可以在 ipad 上使用 loadstart，这样您就知道视频至少正在加载并且可以播放。
谢谢，这是非常有用的建议！

【解决方案3】：

在 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();
    });
});

【讨论】：

刚刚测试过了。已经不行了，allegedly since iOS 4.X.

【解决方案4】：

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

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

您必须监听canplay 或canplaythrough 或load 事件（根据您的需要），然后将translateX 设置为零。

【讨论】：

与答案没有直接关系的两件事： - 与更改视频的不透明度相比，通常是更改视频元素顶部覆盖层的不透明度的更好方法。（如果未启用 GPU 加速，则不透明度不适用于 Google Chrome 上的视频元素） - 避免使用 setAttribute，而是使用 DOM 属性：video.id、video.className、video.width 等。

【解决方案5】：

这里是熟悉 HTML5 事件的好地方。

http://www.w3.org/2010/05/video/mediaevents.html

【讨论】：

【解决方案6】：

问题似乎在于动态创建视频对象 - 这以某种方式破坏了 iPad 上的代码。我写了一个视频播放器，将已经存在的视频元素移动到一个容器中，然后视频立即停止工作。不过在其他系统上没问题... 猜你得想办法让视频元素已经到位，然后在它上面和下面添加所有其他代码....

【讨论】：

【解决方案7】：

这可能是您的 MP4 视频在完全加载之前无法播放的原因：how to get your HTML5 MP4 video to play before being fully loaded。无论如何都值得一试。

【讨论】：

【解决方案8】：

意识到这是一个老问题，但如果其他人偶然发现这个问题，我遇到了类似的问题。

查看 video 元素发送的事件，iPad 似乎会开始加载视频，然后几乎立即将其挂起（似乎与第一个“进度”事件同时发生）。

它不会触发“canplay”或“canplaythrough”事件，直到在真正开始播放之后，所以您必须监听触发的 3 个事件之一播放开始前：

加载开始
进展
暂停

我会将您的处理程序更改为“loadstart”并试一试。

【讨论】：