iPad 上的 HTML5 视频

Question

我有一个动态视频库，它在计算机上运行得很好。转移到 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();
});

Answer 1

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

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

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

Answer 2

在 iPad 上，只有用户开始活动时，它才会加载视频，这是苹果公司的设计，旨在防止 iPhone 或 iPad 用户耗尽他们的数据计划。所以你将无法做你想做的事，抱歉。

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

Answer 3

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

Answer 4

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

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/, ''));
}

摘自深入了解 HTML5 附录 A。

Answer 5

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

Answer 6

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

查看视频元素调度的事件，iPad 似乎将开始加载视频，然后几乎立即暂停它（似乎与第一个“进度”事件同时发生）。

在播放实际开始之前，它不会触发“canplay”或“canplaythrough”事件，因此您必须监听在播放开始之前触发的 3 个事件之一：

• loadstart
• 进度
• 暂停

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

Answer 7

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

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

Answer 8

这可能就是为什么您的 MP4 视频在完全加载之前无法播放的原因： 如何让 HTML5 MP4 视频在完全加载之前播放。无论如何值得一试。