移动 Safari 问题中的 HTML5 视频答案

【问题标题】：HTML5 Videos in Mobile Safari Issue移动 Safari 问题中的 HTML5 视频
【发布时间】：2011-10-30 17:44:45
【问题描述】：

这是我的场景：

我正在 Safari 中构建一个“信息亭”应用程序，其中包含 2 个视频，一个充当“屏幕保护程序”，另一个是补充视频。 SS 通过以下方式循环正常：(done on body onload="init()")

var myVideo = document.getElementById('screensaver');
myVideo.addEventListener('ended', playVideo, false);
function playVideo(){
  var myVideo = document.getElementById('screensaver');
  myVideo.play();
}

当用户在 SS 期间点击屏幕时，它会淡出 $('#screensaver').fadeOut(1000);，并向用户提出一个问题，并带有一个播放下一个视频的按钮。

当第二个视频通过以下方式完成时：

$('#presentation').bind('ended', function(){
        $(this).fadeOut(1000, function(){
            $('#swapVideo').show(); //Overlay for user interaction
            $('#screensaver').fadeIn(1000);
            $('#screensaver').get(0).play();
        }); 
    });

SS 出现，播放，但不再循环播放。显示设置为none时，eventListeners会丢失吗？

当我再次尝试播放第二个视频时，也会发生同样的事情。 'ended' eventListener 似乎丢失了......

【问题讨论】：

标签： html mobile-safari html5-video

【解决方案1】：

我相信 iOS 会忽略 .play()。 Apple 认为最好防止网站自动播放内容，这可能会占用某人的数据计划或在 iOS 上造成不良行为。

【讨论】：

【解决方案2】：

在 iOS 上，.play() 只能通过用户交互直接执行。

Documentation

至于您的问题，如果您更改显示属性，事件侦听器不会解除绑定。

Fiddle

$('.container').on('custom', function (evt) {
  $(this).toggle();  
});

【讨论】：