वीडियो तत्वों के साथ वेब आधारित पूर्णस्क्रीन स्लाइड शो

Question

मैं पूर्ण स्क्रीन पर छवियों और वीडियो के साथ एचटीएमएल 5 आधारित स्लाइड शो विकसित करना चाहता हूं। जब हमारे पास कुछ मिनटों के लिए कोई उपयोगकर्ता गतिविधि नहीं होती है तो यह हमारे कियोस्क में से किसी एक पर स्क्रीनसेवर होगा। हम पहले से ही पूर्ण स्क्रीन पर छवि आधारित स्लाइड शो लागू किया तो वहाँ इस के साथ कोई समस्या नहीं है नहीं है, लेकिन अब हम वीडियो ऑटो प्लेबैक कार्यक्षमता जोड़ने के लिए और साथ ही इतना के लिए उदाहरण का कहना है कि इस स्क्रीनसेवर सामग्री के आदेश है की सुविधा देता है चाहता हूँ

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

जे के बाद क्वेरी स्क्रिप्ट रन हम लगातार उन फ़ाइलों के माध्यम से चलाना चाहते हैं और या तो कुछ सेकंड के लिए छवि दिखाएं या ऑटो-स्टार्ट वीडियो दिखाएं और वीडियो चलाते समय अगली स्लाइड पर जाएं

कोई सुझाव दे सकता है कि यह कैसे करें और यदि कोई है jQuery के लिए पहले से ही लागू प्लगइन्स आप लिंक के साथ प्रदान कर सकते हैं?

Answer 1

असल में यह हल करना बहुत आसान है। जावास्क्रिप्ट की टिप्पणियों के भीतर सभी स्पष्टीकरण खोजें। $(document).ready(function() {}); जैसे बंद होने पर सभी को लपेटें और आप जाने के लिए तैयार हैं।

एचटीएमएल

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

सीएसएस

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

जावास्क्रिप्ट - चर

// 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 = /(?:\.([^.]+))?$/; 

जावास्क्रिप्ट - फंक्शन

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

जावास्क्रिप्ट - अंत: प्रारंभिक समारोह कॉल

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

डेमो

Demo on jsfiddle.net

डेमो पर एक नोट: डेमो में चलाता है सफारी केवल (शायद आईई 9 में भी) beca प्रदान किए गए वीडियो प्रारूप का उपयोग (वीडियो/क्विकटाइम)।

Answer 2

सबसे पहले मैं आपको यह LINK देकर शुरू करूंगा। यहां आप वीडियो इवेंट्स (जैसे: समाप्त, लोड, प्लेइंग इत्यादि) के बारे में बहुत उपयोगी जानकारी पा सकते हैं।

इसके अलावा, यहां LINK है जो पहेली/डेमो (क्रोम पर परीक्षण) में है।

यह एचटीएमएल संरचना होती है:

<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 बटन।

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

और अंत में जावास्क्रिप्ट/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) लोड करना शुरू कर सकते हैं और फिर स्लाइड शो शुरू कर सकते हैं। आपके <video> टैग पर विशेषता preload डालकर वे दस्तावेज़ लोड होने के बाद शुरू और लोड हो जाएंगे (सामान्यतः)।

इसके अलावा आपके <video> टैग में आप सभी differents प्रारूपों के साथ एक से अधिक वीडियो सम्मिलित कर सकते हैं ताकि आप इसकी संगतता क्रॉस-ब्राउज़र का विस्तार कर सकें।

यदि आपके पास कोई अन्य प्रश्न पूछने के लिए स्वतंत्र महसूस है। यह सही नहीं हो सकता क्योंकि मैंने पहली बार ऐसा किया था! ;)