Question

以下是我的情景：

我正在safari中构建一个“kiosk”应用程序，有2个视频，一个充当“屏幕保护程序”，另一个是补充视频。 SS通过以下方式循环正常：（在on body上执行=“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时，eventListener是否会丢失？

当我再次尝试播放第二个视频时，会发生同样的事情。 “已结束”的eventListener似乎丢失了......

Answer 1

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

Answer 2

在iOS上，。play（）只能直接从用户交互中执行。

Documentation

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

Fiddle

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

移动Safari问题中的HTML5视频

2 个答案: