基於Web的全屏幕幻燈片與視頻元素

Question

我想在全屏幕上開發基於HTML 5的幻燈片與圖像和視頻。在幾分鐘內沒有用戶活動的情況下，這將是我們某個信息亭的某種屏幕保護程序。我們已經有了實現的全屏幕上的圖像以幻燈片所以這個沒有問題，但現在我們要添加視頻的自動播放功能，以及因此，例如，可以說這是屏保的內容順序

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

在j之後查詢腳本運行我們想要連續運行這些文件，並顯示圖像幾秒鐘或自動啓動視頻，並在播放視頻結束時移動到下一張幻燈片

有人可以建議如何做到這一點，如果有任何已經實現了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）因爲使用所提供的視頻格式（video/quicktime）。

Answer 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'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>標記中，您可以插入多個具有所有不同格式的視頻，以便擴展其兼容性跨瀏覽器。

如果您有任何其他問題隨時問。這可能不完美，因爲我第一次這樣做！ ;）