jquery - ビデオ要素を含むWebベースのフルスクリーンスライドショー

Question

フルスクリーンの画像とビデオを使用してHTML5ベースのスライドショーを開発したいと思います。これは、数分間ユーザーアクティビティがない場合に、キオスクの1つでスクリーンセーバーのようなものになります。フルスクリーンでの画像ベースのスライドショーがすでに実装されているので、これで問題はありませんが、ビデオの自動再生機能も追加したいので、たとえば、これがスクリーンセーバーコンテンツの順序であるとしましょう

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

jqueryスクリプトの実行後、これらのファイルを継続的に実行し、画像を数秒間表示するか、ビデオを自動開始して、ビデオの再生が終了したら次のスライドに移動します。

誰かがこれを行う方法を提案できますか？jQuery用にすでに実装されているプラ​​グインがある場合は、リンクを提供できますか？

Answer 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's 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();

デモ

jsfiddle.netのデモ

デモに関する注意：提供されているビデオ形式（ video / quicktime ）のため、デモはSafariでのみ（おそらくIE9でも）実行されます。

Answer 2

まず、この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's 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>タグには、すべての異なる形式の複数のビデオを挿入して、互換性のクロスブラウザーを拡張することもできます。

他に質問がある場合は、お気軽にお尋ねください。初めてやったので完璧ではないかもしれません！;)