Вопрос:

Цикл Jquery с видео

jquery

175 просмотра

1 ответ

25 Репутация автора

Я пытаюсь создать автоматическое слайд-шоу на своем веб-сайте с несколькими изображениями, видео (некоторые из которых встроены с 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>
Автор: user1388356 Источник Размещён: 22.08.2016 08:52

Ответы (1)


1 плюс

1096 Репутация автора

Решение

Вы можете запустить видео с помощью javascript / jQuery, используя такую ​​функцию:

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

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

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

Автор: technico Размещён: 22.08.2016 09:04
Вопросы из категории :
32x32