Question

我正在尝试使用jQuery Cycle在我的网站上创建一个自动幻灯片，其中包含多个图像，视频（一些嵌入YouTube）和其他类似媒体。由于Cycle有各种转换，我更喜欢这个而不是Cycle 2.我能够创建幻灯片，可以提取所有图像和视频，但页面上的视频甚至在显示之前就会自动启动。我需要视频在显示/聚焦时播放，而不是在页面加载时播放。如何在jQuery Cycle上聚焦/显示视频时开始播放视频？

   <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()功能。目前，您正在预览幻灯片中的每个视频，这可能会导致性能问题。

Jquery循环与视频

1 个答案: