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

Question

画像とビデオをフルスクリーンで表示するHTML 5ベースのスライドショーを開発したいと考えています。数分のユーザーの操作がない場合、これは私たちのキオスクのスクリーンセーバーになります。私たちはすでにフルスクリーンでイメージベースのスライドショーを実装しているので、問題はありませんが、ビデオ自動再生機能を追加したい場合などにこれをスクリーンセーバーコンテンツの順番と言います。

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

クエリスクリプトは、これらのファイルを連続して実行し、数秒間画像を表示するか、ビデオを自動開始して次のスライドに移動します。

誰かがこれを行う方法を提案できます。すでに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(); 

デモ

Demo on jsfiddle.net

デモに関する注記：デモが実行されていますSafariのみ（おそらくIE9でも）beca提供されたビデオフォーマットの使用（ビデオ/クイックタイム）。

Answer 2

まずは、これをLINKに教えてください。ここでは、ビデオイベント（終了、ロード、再生など）に関する多くの有益な情報を見つけることができます。

また、フィドル/デモ（Chromeでテスト済み）のLINKもあります。私たちは、画像やビデオのすべてを含む単純な<section>を持って

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

：

この

はHTML構造です。私は GIFローダーを追加して、始めに何かをロードしていることを示します（ゆっくりと画像を読み込む必要はありません）。 Pauseボタン。

.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}); 
} 
​ 

は、ビデオイベントを行うには多くの作業があり

CSSは、すべての要素とそのサイズを設定します。可能であればすべての動画をプリロードして（大きすぎず）、スライドショーを開始して、「空の瞬間」がないことを確認します。動画が多すぎる場合は、最初の動画を読み込み（2/3）、スライドショーを開始できます。属性preloadを<video>タグに入れることで、文書が読み込まれると（通常は）読み込みが開始されます。

<video>タグでは、互換性のクロスブラウザを拡張できるように、すべての異なるフォーマットの複数の動画を挿入できます。

その他のご質問がある場合はお気軽にお問い合わせください。私は初めてこのように完璧ではないかもしれません！ ;）