Полноэкранное слайд-шоу с видеоэлементом

Я хочу создать слайд-шоу на основе HTML 5 с изображениями и видео на полном экране. это будет своего рода заставкой в одном из наших киосков, когда нет активности пользователя в течение нескольких минут. у нас уже есть слайд-шоу на основе изображений на полноэкранном режиме, так что с этим нет никаких проблем, но теперь мы хотим добавить функцию автоматического воспроизведения видео, чтобы, например, сказать, что это порядок содержимого заставки

image.jpeg
image2.jpeg
videoclip.mp4
image3.jpeg
someothervide.mp4

После запуска jquery script мы хотим постоянно запускать эти файлы и показывать изображение в течение нескольких секунд или автоматически запускать видео и переходить на следующий слайд, когда воспроизведение видео завершено

может кто-нибудь предложить, как это сделать, и если есть какие-либо уже реализованные плагины для jQuery, вы можете предоставить ссылки?

Ответ 1

На самом деле это довольно легко решить. Найти все объяснения в комментариях JavaScript. Оберните все, что есть в закрытии, например $(document).ready(function () {});, и вы готовы к работе.

HTML

<div id="canvas" class="canvas"></div>

CSS

div.canvas {
    display:           table-cell;
    width:             1280px;
    height:            800px;
    background:        black;
    vertical-align:    middle;
}

div.canvas > video {
    display:           block;
    margin:            auto;
}

div.canvas > img {
    display:           block;
    margin:            auto;
}

JavaScript - переменные

// array containing links to the content
var content = ['movie_1.m4v', 'movie_2.m4v', 'image_1.jpg', 'image_2.jpg'];
// element where anything will be played
var canvas = $('#canvas');
// duration an image is shown in ms (milliseconds)
var durationImage = 1000;
// basic source for image and video tag
var srcImage = '<img src="$" alt="">';
var srcVideo = '<video autoplay><source src="$" type="video/mp4"></source></video>';
// current position
var current = -1;
// regex for getting file extension (from http://stackoverflow.com/questions/680929/how-to-extract-extension-from-filename-string-in-javascript)
var regex = /(?:\.([^.]+))?$/;

JavaScript - Функция

// method to play the next content element
function playNext() {
    // increase current element and set it to 0 if end is reached
    ++current;  
    if (content.length == current) {
        current = 0;
    }
    // get file and its extension and check whether it valid
    var source      = null;
    var file        = content[current];
    var extension   = regex.exec(file)[1];
    if ('jpg' == extension) {
        source      = srcImage;
    }
    if ('m4v' == extension) {
        source      = srcVideo;
    }
    // if source seems valid
    if (null !== source) {
        // replace placeholder with the content and insert content into canvas
        source  = source.replace('$', file);
        canvas.html(source);
        // if content is an image play next after set duration
        if ('jpg' == extension) {
            setTimeout(function() { playNext(); }, durationImage);              
        }
        // if content is a video, bind 'onend' event handler to it, to play next
        if ('m4v' == extension) {
            canvas.find('video').bind("ended", function() {
                playNext();
            });
        }
    }
}

JavaScript - Наконец: вызов начальной функции

// show first (remember current = -1 from above :) )
playNext();

Demo

Демо на jsfiddle.net

Заметка на демо: демо работает только в Safari (возможно, в IE9) из-за предоставленного видеоформата (видео/quicktime).

Ответ 2

Прежде всего, я начну с предоставления вам LINK. Здесь вы можете найти много полезной информации о видео-событиях (например, закончите, загрузите, играйте и т.д.).

Кроме того, здесь LINK для скрипта/демонстрации (протестировано в Chrome).

Это html-структура:

<section class="slideshow">
    <ul>
         <img src="" class="loader" />
         <div class="pause"></div>
         <li>img/video</li>
         <li>img/video</li>
         <li>img/video</li>
         <li>img/video</li>
         <li>img/video</li>
    </ul>
</section>

У нас есть простой <section>, который содержит все наши изображения и видео. Я также добавил загрузчик GIF, чтобы показать, что мы загружаем что-то в начале (нет необходимости медленно видеть загрузку изображений) и кнопку Pause.

Css для установки всех элементов и их размера:

.slideshow {
    width: 700px;
    height: 300px;
    background: #efefef;
    position: relative;
    background: white;
    box-shadow: 0px 0px 5px black;
    margin: 20px auto;
}

.slideshow ul {
    width: 100%;
    height: 100%;
    position: relative;
    list-style: none;
    overflow: hidden;
    display: none;
}

.slideshow ul li {
    position: absolute;
    left: 100%;
}

.slideshow ul li:first-child {
    left: 0%;
}

video {
    background: #434343;
}

.loader {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
}

.pause {
    display: none;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    z-index: 100;
    line-height: 50px;
    text-align: center;
    font-size: 1.0em;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

И, наконец, часть Javascript/jQuery:

// Some variables
var timer;
var sWidth = 400, sHeight = 200, border = 10;
var slideshowSet = false;
var video;
var videoSet = false;
var slidePause = false;
var $el;
var $currentEl = $('.slideshow').find('li').eq(0);

// On document ready
$(function() {
    // Set slideshow dimensions + border
    setSlideDimensions(sWidth, sHeight, border);

    // Show pause button
    $('.slideshow').hover(
        function(){
            if(slideshowSet) {
                $('.pause').stop().fadeIn(200);
            }
        },
        function() {
            if(slideshowSet) {
                $('.pause').fadeOut(200);
            }
        }
    );

    // Pause button
    $('.pause').click(function() {
         if($(this).text() == '| |') {
            // Pause slideshow
            slidePause = true;
            $(this).text('►');
            clearTimeout(timer);
            if($currentEl.find('video').size() == 1){
                video.pause();
            }
        } else {
            // Play slideshow
            $(this).text('| |');
            if($currentEl.find('video').size() == 1){
                video.play();
            } else {
                timer = setTimeout(slide, 2000);
            }
        }
    });
});

// Window ready (all images loaded, but not videos!!)
$(window).ready(function() {
    // Hide loader GIF
    $('.loader').fadeOut(200);

    // Show slideshow
    $('.slideshow ul').fadeIn(200);

    // Start slideshow
    timer = setTimeout(slide, 2000);
    slideshowSet = true;
});

// Function to slide
function slide() {
    videoSet = false;
    var $el = $('.slideshow').find('li');
    $el.eq(1).add($el.eq(0)).animate({'left': '-='+sWidth}, {queue: false, duration: 300, complete: function() {
        $el.eq(0).animate({'left': '100%'}, 0);
        if($(this).index() == 1){
            $('.slideshow ul').append($el.eq(0));
            $currentEl = $el.eq(1);

            // We chek if it a video
            if($(this).find('video').size() == 1) {
                //If yes we set the variable
                video = $(this).find('video')[0];
                videoSets();

                // If video can play
                if (video.canPlayType) {
                     // Play video
                     video.play();
                } else {
                     // Error message
                     alert('No html5');
                }
            } else {
                // If not a video we set timeout to next slide
                timer = setTimeout(slide, 2000);
            }
        }
    }});
 }

 // Function to set all video events
 function videoSets(){
     if(!videoSet) {
         videoSet = true;
        // Video ended
        video.addEventListener("ended", function () {
            timer = setTimeout(slide, 2000);
        });

        // Video Playing
        video.addEventListener("playing", function () {
            clearTimeout(timer);
            if(slidePause) {
                $('.pause').text('| |');
                video.play();
                slidePause = false;
            }
        });
    }
}

// Function to set slideshow dimensions
function setSlideDimensions(w, h, b) {
    $('.slideshow').css({width: w, 'height': h, 'padding': b});
    $('.slideshow ul li img, .slideshow ul li video').css({width: w, 'height': h});
}

С видео-событиями больше работы. Я бы предварительно загрузил все видео, если это было возможно (не слишком большой), а затем запустил слайд-шоу, чтобы быть уверенным, что нет "пустых моментов". Если у вас слишком много видеороликов, вы можете начать загрузку первых (2/3), а затем запустить слайд-шоу. Поместив атрибут preload в тэг <video>, они начнут и продолжат загрузку после загрузки документа (обычно).

Также в тэге <video> вы можете вставить более одного видео со всеми форматами разных форматов, чтобы вы расширили его кросс-браузер совместимости.

Если у вас есть другие вопросы, не стесняйтесь спрашивать. Это может быть не совсем так, как я сделал это в первый раз!;)