相关疑难解决方法(0)

是否可以将slick.js与html5自托管视频一起使用,在没有用户交互的情况下播放和暂停视频？

我目前有以下代码,有一个带有垂直光滑幻灯片的双滑块和一个主要部分,大图像和视频将出现并自动滚动.这将在电视上托管,因此不会有用户互动.

WelcomeTV屏幕网站

我怎样才能让包含视频的幻灯片在出现后完全播放,一旦完成,继续播放幻灯片并无限期重复播放.视频可能包含各种长度,因此需要动态检测长度.

我尝试在这个问题上实现代码但是我无法让我的示例正常工作.

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