Javascript - Adding Full Screen Video to Image Slideshow

问题

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

回答1:

You will have to create a video element instead of a img one.

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

回答2:

Fiddle Here

Approach

What we will need to do is have two elements to show, using the <img> element to show images, then the <video> element to show videos. When rotateimages() is called we will want to detect if the element is a video, switch to the <video> element and hide the <img> element. Otherwise if it's a image, then do vise-versa if we are moving to an image hide <img> and show <video>.

So the HTML will have something like this:

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

The video elements in JavaScript I will simply use an Object with a type and src property like so:

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

Implementation

To implement this we will do 3 steps in the rotateimages() function.

First .hide() the appropriate element based on if we are on a video or image element. Otherwise both the <video> and <img> tags would be showing, ruining the effect.

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

Where nextSlideshowElement() is defined as:

// 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)    
}

Then we move to the next element in our array, as you have already defined:

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

Finally we do the transition effects between moving between a video to an image or image to video. Note that I added a delay, giving time so the next element wont appear below, placing the two <video> and <img> items in the same place. I used load() to start the video from the beginning.

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();
}

来源：https://stackoverflow.com/questions/25427594/javascript-adding-full-screen-video-to-image-slideshow

标签

javascript

video

slideshow