JQuery Cycle with Video

Question

Я пытаюсь создать автоматическое слайд-шоу на своем веб-сайте с несколькими изображениями, видео (некоторые встроенные с YouTube) и другими подобными средствами, использующими jQuery Cycle. Поскольку цикл имеет различные переходы, я предпочитаю это, а не цикл 2. Мне удалось создать слайд-шоу, которое вытягивает все изображения и видео, но видео на странице запускается автоматически даже до того, как оно будет отображаться. Мне нужно, чтобы видео воспроизводилось, когда оно отображается/сфокусировано, а не когда загружается страница. Как начать воспроизведение видео, когда оно сфокусировано/отображается в цикле jQuery?

<script type="text/javascript"> 
     $(document).ready(function() { 

      $('.slideshow').cycle({ 
       fx: 'all', // choose your transition type, ex: fade, scrollUp, shuffle, etc...  
       timeoutFn: calculateTimeout, 
       //before: onBefore, 
       //after: onAfter, 
      }); 
     }); 

     var timeouts = []; 
     function calculateTimeout(currElement, nextElement, opts, isForward) { 
      var index = opts.currSlide; 
      return timeouts[index] * 1000; 
     }; 

    function addTimeout(timeoutInSec){ 
     timeouts.push(timeoutInSec); 
    }; 
    </script> 

    <c:forEach var="listValue" items="${list}"> 
    <div class="slideshow" style="width: 100%; height: 100%;"> 
     <c:if test="${listValue.getType().getName() eq 'IMAGE'}"> 
      <img src="${imagefile}"/> 
      <script>addTimeout("${listValue.getTimeout()}")</script> 
     </c:if> 

     <c:if test="${listValue.getType().getName() eq 'VIDEO'}"> 
      <video id="video" controls autoplay loop style="width: 100%; height: 100%;"> 
      <source src="abc.mp4"> 
     </video> 
     <script>addTimeout("${listValue.getTimeout()}")</script> 
     </c:if> 
    </div> 
</c:forEach> 

Answer 1

Вы можете запустить видео WIA JavaScript/JQuery с помощью такой функции:

var video = $('#video').get(0); 
video.play(); 

Так в основном, вам нужно удалить атрибут autoplay из видеотега, и использовать кусок кода выше когда видео становится видимым (см. раздел onAfter).

Обратите внимание, что вы можете использовать (или нет) функцию video.load(). Прямо сейчас, вы предварительно загружаете каждое видео в слайд-шоу, это может вызвать проблемы с производительностью.