Html iPad 上的 HTML5 视频

HTML5 video on iPad

提问by mrollinsiv

I have a dynamic video gallery and it works great on a computer. When moving to an iPad, the video starts loading and it shows the cannot play icon. Instead of this I'd rather the video not show until it's ready to play. I have tried to add events listeners for "canplaythrough" and "canplay" and when they occur for the video to fade in then play. Does the iPad not support these events?

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

回答by Miller Medeiros

The way to solve this visual problem is to hide the video element until it is ready to be played. Note that you cannot set display:none(video won't load if you do that) and visibility:hiddenwon't solve the issue either.

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

To fix it, wrap the video element on a DIV with overflow:hiddenand set -webkit-transform:translateX(1024px)(a number high enough to push the video outside the screen).

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

Than you have to listen for the canplayor canplaythroughor loadevents (based on your need) and set the translateXto zero after that.

比您必须侦听canplay或canplaythrough或load事件（根据您的需要）并在此translateX之后将其设置为零。

回答by Jeff Beck

On the iPad it will not load the video until a user starts an event this is by design of apple to prevent iPhone or iPad users from burning up their data plans. So you will not be able to do what you want sorry.

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

Check out this linkand look for the Device-Specific Considerations section for some info. But it will not start loading data so it couldn't fire the canplaythrough event until a user touches it.

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

回答by Ryan Weiss

automatically starts player on the ipad/iphone:

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

回答by robertc

Check to see if the browser can play the video before you attempt to load it:

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

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

Taken from Dive Into HTML5 Appendix A.

来自潜水进入HTML5附录A。

回答by J?rn Berkefeld

the problem seems to be dynamically creating the video object - that somehow breaks the code on the iPad. I wrote a video player that moves the alreay present video element into an container and immediately the video stops working. no problem on other systems though... guess you gotta find a way to have the video element already in place and then add all your other code above and below it....

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

回答by yenemy

Realize this is an old issue, but if anyone else stumbles across this, I encountered a similar problem.

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

Looking at the events dispatched by the video element, it looks like the iPad will start loading the video, then almost immediately suspend it (appears to be simultaneous with the first 'progress' event).

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

It will notfire the "canplay" or "canplaythrough" events until afterplayback has actually begun, so you must listen to one of the 3 events that do fire before playback begins:

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

• loadstart
• progress
• suspend

• 加载启动
• 进步
• 暂停

I would change your handler to 'loadstart' and give that a shot.

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

回答by Ian Devlin

This is possibly why your MP4 video won't play until it's fully loaded: how to get your HTML5 MP4 video to play before being fully loaded. Worth a shot anyway.

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

回答by Tyguy7

Here's a GREAT place to get familiar with HTML5 events.

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

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

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