Slick.js और एचटीएमएल 5 वीडियो ऑटोप्ले और वीडियो

Question

पर थामने यह एचटीएमएल 5 स्वयं की मेजबानी वीडियो के साथ slick.js उपयोग करने के लिए खेलते हैं और उपयोगकर्ता को बताए बिना एक वीडियो को रोकने के लिए, संभव है?

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

WelcomeTV Screen Site

मैं वीडियो प्ले पूरी तरह से एक बार ऐसा लगता है युक्त स्लाइड को कैसे हो सकता है और इसके पूर्ण हो जाने, स्लाइड शो जारी है और अनिश्चित काल के लिए दोहराएँ। वीडियो में विभिन्न लंबाई हो सकती है ताकि इसे गतिशील रूप से लंबाई का पता लगाना पड़े।

मैं this question पर कोड को लागू करने हालांकि मैं अपने उदाहरण काम कर पाने में सक्षम नहीं था की कोशिश की।

<div id="slideBox"> 
    <!--Sidebar--> 
    <div class="sliderSidebar"> 
     <div><img src="http://placehold.it/200x100"></div> 
     <div><img src="http://placehold.it/200x100"></div> 
     <div><img src="http://placehold.it/200x100"></div> 
     <div><img src="http://placehold.it/200x100"></div> 
     <div><img src="http://placehold.it/200x100"></div> 
     <div><img src="http://placehold.it/200x100/C8102E/FFFFFFF?text=Video" /></div> 
    </div> 

    <div id="main-image" class="sliderMain"> 
     <div><img src="http://placehold.it/900x500"></div> 
     <div><img src="http://placehold.it/900x500"></div> 
     <div><img src="http://placehold.it/900x500"></div> 
     <div><img src="http://placehold.it/900x500"></div> 
     <div><img src="http://placehold.it/900x500"></div> 
     <div id="slide-video"> 
      <video autoplay loop width="900px"> 
       <source src="video/SampleVideo.mp4" /> 
      </video> 
     </div> 
    </div> 

    <script type="text/javascript"> 

    $(document).ready(function(){ 
     $('.sliderMain').slick({ 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      arrows: false, 
      fade: true, 
      asNavFor: '.sliderSidebar', 
      autoplay: true, 
      autoplaySpeed: 3000, 
      onAfterChange : function() { 
       player.stopVideo(); 
      } 
     }); 
     $('.sliderSidebar').slick({ 
      slidesToShow: 5, 
      slidesToScroll: 1, 
      asNavFor: '.sliderMain', 
      dots: false, 
      centerMode: false, 
      focusOnSelect: true, 
      vertical: true, 
      arrows: false 
     }); 
     var video = $('.sliderMain .slick-active').find('video').get(0).play(); 

     $('.sliderMain').on('afterChange', function(event, slick, currentSlide, nextSlide){ 
     $('.sliderMain .slick-slide').find('video').get(0).pause(); 
     var video = $('.sliderMain .slick-active').find('video').get(0).play(); 
     }); 
    }); 
</script> 

Demo

Answer 1

हाँ, यह जावास्क्रिप्ट का उपयोग किया जा सकता है।

1. ठहराव स्लाइडर
2. वीडियो

आप इस slick.js घटना afterChange उपयोग कर सकते हैं खेलने:

$('.sliderMain').on('afterChange', function(event, slick, currentSlide){ 
    if (currentSlide == 5) { 
    $('.sliderMain').slick('slickPause'); 
    myVideo.play(); 
    } 
}); 

जब वीडियो स्लाइड हो जाता है currentSlide आप की जरूरत है

स्लाइडर को सह करने के क्रम में वीडियो समाप्त होने के लिए आपको एक ईवेंट श्रोता जोड़ने की भी आवश्यकता होगी ntinue। आप इस तरह ऐसा कर सकते हैं:

document.getElementById('myVideo').addEventListener('ended',myHandler,false); 
function myHandler(e) { 
    $('.sliderMain').slick('slickPlay'); 
} 

आप इस समस्या हो रही है, तो कृपया एक JSFiddle जोड़ सकते हैं और मैं तुम्हें वहाँ मदद की कोशिश करेंगे।

संपादित करें: यहाँ मदद के लिए एक काम कर JSFiddle

$(document).ready(function() { 
 
    $('.sliderMain').slick({ 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
    arrows: false, 
 
    fade: true, 
 
    asNavFor: '.sliderSidebar', 
 
    autoplay: true, 
 
    autoplaySpeed: 3000 
 
    }); 
 
    $('.sliderSidebar').slick({ 
 
    slidesToShow: 5, 
 
    slidesToScroll: 1, 
 
    asNavFor: '.sliderMain', 
 
    dots: false, 
 
    centerMode: false, 
 
    focusOnSelect: true, 
 
    vertical: true, 
 
    arrows: false 
 
    }); 
 
    $('.sliderMain').on('afterChange', function(event, slick, currentSlide) { 
 
    if (currentSlide == 5) { 
 
     $('.sliderMain').slick('slickPause'); 
 
     theVideo.play(); 
 
    } 
 
    }); 
 

 
    document.getElementById('theVideo').addEventListener('ended', myHandler, false); 
 

 
    function myHandler(e) { 
 
    $('.sliderMain').slick('slickPlay'); 
 
    } 
 
});

#slideBox { 
 
    width: 1300px; 
 
    max-height: 500px; 
 
    overflow: hidden; 
 
    margin: 1% auto; 
 
    position: relative; 
 
    top: 1em; 
 
    background-color: #54585A; 
 
    border-radius: .3em; 
 
} 
 
video { 
 
    background-color: black; 
 
} 
 
#slideBox .slick-vertical .slick-slide { 
 
    border: none; 
 
} 
 
.sliderSidebar { 
 
    width: 200px; 
 
    height: 500px; 
 
    float: left; 
 
} 
 
#slideBox .slick-vertical .slick-slide { 
 
    border: none; 
 
} 
 
.sliderMain { 
 
    width: 900px; 
 
    height: 500px; 
 
    position: relative; 
 
    float: left; 
 
}

<div id="slideBox"> 
 
    <!--Sidebar--> 
 
    <div class="sliderSidebar"> 
 
    <div><img src="http://placehold.it/200x100"></div> 
 
    <div><img src="http://placehold.it/200x100"></div> 
 
    <div><img src="http://placehold.it/200x100"></div> 
 
    <div><img src="http://placehold.it/200x100"></div> 
 
    <div><img src="http://placehold.it/200x100"></div> 
 
    <div><img src="http://placehold.it/200x100/C8102E/FFFFFFF?text=Video" /></div> 
 
    </div> 
 

 
    <div id="main-image" class="sliderMain"> 
 
    <div><img src="http://placehold.it/900x500"></div> 
 
    <div><img src="http://placehold.it/900x500"></div> 
 
    <div><img src="http://placehold.it/900x500"></div> 
 
    <div><img src="http://placehold.it/900x500"></div> 
 
    <div><img src="http://placehold.it/900x500"></div> 
 
    <div id="slide-video"> 
 
     <video width="900px" id="theVideo"> 
 
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" /> 
 
     </video> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>