用于HTML5视频的iOS enterFullScreen使用onloadedmetadata不一致的结果

Question

我正在使用一些HTML5视频，我在其中设置了自定义播放按钮。在桌面/非触摸设备上这一切都运行良好，但我想做的是在触摸设备上，启用全屏（默认情况下在iOS手机而不是iOS平板电脑上执行此操作），我强制执行此操作后onloadedmetadata函数。不过，我有一个问题。有时它有效，有时它不起作用。我已经记录了“已加载”＃39;一旦它被给予继续检查它已经到了那么远，它总是记录但是然后我抛出了InvalidStateError (DOM Exception 11): The object is in an invalid state.的错误webkitEnterFullScreen。

有什么想法吗？代码包括在下面。

function startFullscreen(elem) {
    if (elem.enterFullScreen) {
        elem.enterFullScreen();
    } else if (elem.mozEnterFullScreen) {
        elem.mozEnterFullScreen();
    } else if (elem.webkitEnterFullScreen) {
        elem.webkitEnterFullScreen();
    } else if (elem.msEnterFullScreen) {
        elem.msEnterFullScreen();
    }
}

$('.media a.video__trigger').on('click', function(e) {
    e.preventDefault();
    var $this = $(this),
    $parent = $this.parent('.media'),
    $video = $parent.find('video'),
    video = $parent.find('video').get(0),
    videoSource = $video.find('source'),
    webm = $this.data('video-webm'),
    mp4 = $this.data('video-mp4');
    videoSource[0].src = webm; // WebM is first
    videoSource[1].src = mp4; // MP4 is second
    if (supportsTouch) {
        setTimeout(function() {
            video.load();
            video.onloadedmetadata = function() {
                console.log('loaded');
                startFullscreen(video);
                video.play();
            };
        }, 250);
    } else {
        video.load();
        video.play();
    }
});