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

Javascript - Adding Full Screen Video to Image Slideshow

本文关键字：图像 幻灯片 视频 添加 Javascript      更新时间：2023-09-26

我需要帮助，我将如何添加一个短视频剪辑显示随着我的图像幻灯片。下面是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"/>

您必须创建一个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();
        }
    }
}
工作小提琴

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();
}
相关文章：