Javascript - 将全屏视频添加到图像幻灯片 [英] Javascript - Adding Full Screen Video to Image Slideshow

问题描述

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

I need assistance as to how I would add a short video clip to display along with my image slideshow. Below is the JavaScript slideshow which works fine with images, I would like to add videos alongside with the images as part of the slideshow. Any assistance would be greatly appreciated. Thanks.

<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"/>

推荐答案

您必须创建 视频 元素而不是 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();
        }
    }
}

工作小提琴

这篇关于Javascript - 将全屏视频添加到图像幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！