生成HTML5视频内容，然后单击事件iOS播放视频

Question

我有一个内容区域，当您按下前一个按钮或继续按钮时，会动态加载新内容。html的一个简单例子是：

<div id="contentArea"></div>
<nav>
   <ul>
      <li class="butPrev">Previous</li>
      <li class="butNext">Next</li>
   </ul>
</nav>

我过去在iOS6中所做的是在第一次加载时在内容区域上设置一个掩码，我可以单击这个掩码来触发音频和视频，然后所有其他动态HTML5视频都会播放。我不确定iOS7，但iOS8不允许这样做。我将不得不为每一页做，这违背了面具的目的，是一个用户的痛苦。

作为另一种选择，我试图通过单击next按钮来触发视频的播放。问题是，next按钮捕获动态内容，将其加载到内容区域，此时需要触发播放，这是iOS不喜欢的。是否有任何方法来等待内容区域加载，同时保持在click事件中，这样它就不会被阻塞？下面是我正在尝试的内容(我已经去掉了Ajax的内容)：

var contentLoaded = false;

$('nav li').click(function(){
    contentLoaded = false;
    //load HTML with HTML5 video via Ajax
    //when done, sets contentLoaded = true
    triggerAutoplay();
});

function triggerAutoplay() {
    if (contentLoaded) {
       $('video[autoplay]').each(function(){
           if ($('this').attr('autoplay') != "false") {
               this.play();
           }
       });
    } else {
       setTimeout(triggerAutoplay,100);
    }
}

Answer 1

play触发器必须在click函数中，因此我必须将异步设置为false，以便ajax在函数调用之前完成，如下所示：

$('nav li').click(function(){
   $.ajax({
      url: "whatever",
      async: false
   });
   triggerAutoplay(); 
});

function triggerAutoplay() {
   $('video[autoplay]').each(function(){
           if ($('this').attr('autoplay') != "false") {
               this.play();
           }
   });
}

Answer 2

我不确定我是否正确地理解了你，但也许你应该在ajax调用成功的过程中这样说：

$('nav li').click(function(){
   $.ajax({
      url: "whatever"
   }).done(function() {
      //do some stuff
      triggerAutoplay();
   }); 
});

function triggerAutoplay() {
   $('video[autoplay]').each(function(){
           if ($('this').attr('autoplay') != "false") {
               this.play();
           }
   });
}