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用户烧毁他们的数据计划。所以你将无法做你想做的事。

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

Answer 3

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

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。

Answer 4

自动启动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 5

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

Answer 6

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

查看视频元素发送的事件，看起来iPad将开始加载视频，然后几乎立即暂停（似乎与第一个＆＃39;进展事件同时发生）。

它不会触发＆＃34; canplay＆＃34;或＆＃34; canplaythrough＆＃34; 在播放之后的事件实际上已经开始，因此您必须在播放开始前收听3个事件中的一个：

loadstart
进步
暂停

我会将您的处理程序更改为＆＃39; loadstart＆＃39;并试一试。

Answer 7

这是一个熟悉HTML5活动的好地方。

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

Answer 8

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

iPad上的HTML5视频

8 个答案: