构建HTML5视频内容，然后在iOS点击事件上播放视频

Build HTML5 video content, then play video on click event iOS

本文关键字：视频 事件 播放 iOS 然后 HTML5 构建      更新时间：2023-09-26

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

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

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

作为一种选择，我试图通过点击下一个按钮来触发视频的播放。问题是，下一个按钮捕获动态内容，将其加载到内容区域，然后需要触发播放，而iOS不喜欢这样。有没有什么方法可以等到内容区域加载后，再停留在点击事件中，这样它就不会被阻止？以下是我正在尝试的（我已经去掉了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);
    }
}

我不确定我是否理解你的意思，但也许你应该这样评价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();
           }
   });
}

播放触发器必须在点击函数内，所以我必须将async设置为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();
           }
   });
}
相关文章：