Question

我需要协助如何添加一个短视频片段以及我的图像幻灯片显示。下面是JavaScript幻灯片，可以很好地处理图像，我想在幻灯片中添加视频和图像。任何帮助将不胜感激。感谢。

<script type="text/javascript">
        var img1 = new Image();
            img1.src = "path/image1.jpg";

        var img2 = new Image();
            img2.src = "path/image2.jpg";

        var img3 = new Image();
            img3.src = "path/image3.jpg";

        var img4 = new Image();
            img4.src = "path/video.mp4";

        var galleryarray = [img1, img2, img3, img4];

        var curimg = 1;

        function rotateimages(){
            $( "#slideshow" ).fadeOut( "slow", function() {
            document.getElementById("slideshow").setAttribute("src", galleryarray[curimg].src)
            curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
         });
        $( "#slideshow" ).fadeIn( "slow" );
        }
        window.onload=function(){
            setInterval("rotateimages()", 5000)
        }

HTML：

<img id="slideshow" src="images/image1.jpg" class="img-responsive"/>

Answer 1

您必须创建video元素而不是img元素。

function img(src) {
    var el = document.createElement('img');
    el.src = src;
    return el;
}

function vid() {
    //Accepts any number of ‘src‘ to a same video ('.mp4', '.ogg' or '.webm')
    var el = document.createElement('video');
    el.onplay = function () {
        clearInterval(sliding);
    };
    el.onended = function () {
        sliding = setInterval(rotateimages, 5000);
        rotateimages();
    };
    var source = document.createElement('source');
    for (var i = 0; i < arguments.length; i++) {
        source.src = arguments[i];
        source.type = "video/" + arguments[i].split('.')[arguments[i].split('.').length - 1];
        el.appendChild(source);
        }
        return el;
    }

var galleryarray = [img('path/image1.jpg'),
                    img('path/image2.jpg'),
                    img('path/image3.jpg'),
                    vid('path/video.mp4', 'path/video.ogg')];

var curimg = 1;

function rotateimages() {
    $("#slideshow").fadeOut("slow");
    setTimeout(function () {
        curimg = (curimg < galleryarray.length - 1) ? curimg + 1 : 0
        document.getElementById('slideshow').innerHTML = '';
        galleryarray[curimg].style.width = "100%";
        galleryarray[curimg].style.height = "100%";
        document.getElementById('slideshow').appendChild(galleryarray[curimg]);
        if (galleryarray[curimg].tagName === "VIDEO") {
            galleryarray[curimg].play();
        }
        $("#slideshow").fadeIn("slow");
    }, 1000);
}

var sliding;
window.onload = function () {
    sliding = setInterval(rotateimages, 5000);
    rotateimages();
    //FullScreen won't work in jsFiddle's iframe
    document.getElementById('slideshow').onclick = function () {
        if (this.requestFullscreen) {
            this.requestFullscreen();
        } else if (this.msRequestFullscreen) {
            this.msRequestFullscreen();
        } else if (this.mozRequestFullScreen) {
            this.mozRequestFullScreen();
        } else if (this.webkitRequestFullscreen) {
            this.webkitRequestFullscreen();
        }
    }
}

Working Fiddle

Answer 2

Fiddle Here

方法

我们需要做的是要显示两个元素，使用<img>元素显示图片，然后使用<video>元素显示视频。调用rotateimages()时，我们需要检测元素是否为video，切换到<video>元素并隐藏<img>元素。否则，如果它是image，那么如果我们转移到image隐藏<img>并显示<video>，则反之亦然。

所以HTML会有这样的东西：

<img id="slideshow" src="..." width=300 height=300 alt="Slideshow">

<video width="300" height="300" id="slideshow_vid" hidden>
    <source id="slideshow_src" src="...">
</video>

JavaScript中的video elements我只会使用Object type和src属性，如下所示：

var moive1 = {
    src: "...", 
    type: "video"
};

实施

为了实现这一点，我们将在rotateimages()函数中执行3个步骤。

首先.hide()根据我们是video还是image元素的相应元素。否则，<video>和<img>标记都会显示，从而破坏效果。

$( "#slideshow" ).fadeOut( "slow", function() {
    nextSlideshowElement()
});
$( "#slideshow_vid" ).fadeOut( "slow", function() {
    nextSlideshowElement()
});

nextSlideshowElement()定义为：

// Place next element on #slideshow if it's not a video.
function nextSlideshowElement(){
    if(galleryarray[curimg].type != "video") 
        document.getElementById("slideshow").setAttribute("src", galleryarray[curimg].src)    
}

然后我们移动到数组中的下一个元素，就像你已经定义的那样：

curimg = (curimg<galleryarray.length-1)? curimg+1 : 0

最后，我们会在video到image或image到video之间进行转换效果。请注意，我添加了延迟，给出了时间，因此下一个元素不会显示在下方，将两个<video>和<img>项放在同一个位置。我使用load()从头开始播放视频。

if(galleryarray[curimg].type == "video") {
    // Show <video> slideshow element
    $( "#slideshow" ).fadeOut( "slow" );
    $( "#slideshow_vid" ).delay( 600 ).fadeIn( "slow" );
    // Set the video src to the array elements src.
    $( "#slideshow_src" ).attr("src", galleryarray[curimg].src);
    $( "#slideshow_vid" ).load();
    $( "#slideshow_vid" ).delay( 600 ).get(0).play();
}
else { 
    // Show <img> slideshow element
    $( "#slideshow_vid" ).fadeOut( "slow" );
    $( "#slideshow" ).delay( 600 ).fadeIn( "slow" ); 
    $( "#slideshow_vid" ).get(0).pause();
}

Javascript - 将全屏视频添加到图像幻灯片

2 个答案:

方法

实施