Question

我最近在公司网站ena electronics上安装了Jssor滑块，我试图在网站上添加自动播放视频。

使用下面的代码，我可以在网页上播放它但是当它放入div中的滑块时它不起作用......我错过了什么？

感谢

<video width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Answer 1

对于任何想知道的人，我设法得到它：

 <!-- #region Jssor Slider Begin -->
        <!-- Generator: Jssor Slider Maker -->
        <!-- Source: http://www.jssor.com -->
        <!-- This code works without jquery library. -->
        <script src="/src/slider/jssor.slider-22.1.8.min.js" type="text/javascript"></script>
        <script>
            jssor_1_slider_init = function () {
                var options = {
                    $AutoPlay: 1,
                    $Idle: 2000,
                    $SlideDuration: 800,
                      $SlideEasing: $Jease$.$OutQuint,
                      $ArrowNavigatorOptions: {
                        $Class: $JssorArrowNavigator$
                      },
                      $BulletNavigatorOptions: {
                        $Class: $JssorBulletNavigator$
                      }
                };

                var jssor_1_slider = new $JssorSlider$('jssor_1', options);

                function SliderParkEventHandler(slideIndex, fromIndex)
                {
                    if(slideIndex == 0)
                    {
                        var video = document.getElementById("myvideo");
                       var button = document.getElementById("play");
                       if (video.paused) {
                          video.play();
                          button.textContent = "||";
                       }
                    }
                }

                jssor_1_slider.$On($JssorSlider$.$EVT_PARK,SliderParkEventHandler);

                /*responsive code begin*/
                /*you can remove responsive code if you don't want the slider scales while window resizing*/
                function ScaleSlider() {
                    var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                    if (refSize) {
                        refSize = Math.min(refSize, 1920);
                        jssor_1_slider.$ScaleWidth(refSize);
                    }
                    else {
                        window.setTimeout(ScaleSlider, 30);
                    }
                }
                ScaleSlider();
                $Jssor$.$AddEvent(window, "load", ScaleSlider);
                $Jssor$.$AddEvent(window, "resize", ScaleSlider);
                $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
                /*responsive code end*/
            };
        </script>
        <link rel="stylesheet" href="/src/slider/slider.css" type="text/css"/>

    <div id="jssor_1" style="position: relative; top: 0px; left: 0px; width: 1428px;
        height: 305px;">
        <!-- Loading Screen -->
                <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
                    <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
                    <div style="position:absolute;display:block;background:url('/img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
                </div>
        <!-- Slides Container -->
        <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 1428px; height: 305px; overflow: hidden;">
                <div data-idle="15000">
                        <div>
                        <!-- assuming that you placed video in the second slide -->
                        <video id="myvideo" width="1428" height="305" autoplay>
                            <source src="../src/video/products.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                </div>
                    <div>
                        <img data-u="image" src="/img/home/logo.png" alt="Logo"/>
                    </div>
                </div>
                <!-- Bullet Navigator -->
                <div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
                    <!-- bullet navigator item prototype -->
                    <div data-u="prototype" style="width:16px;height:16px;"></div>
                </div>
                <!-- Arrow Navigator -->
                <span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
                <span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
            </div>
        <!-- Trigger -->
        <script>
            jssor_1_slider_init();
        </script>
    <!-- Jssor Slider End -->

Answer 2

目前，jssor滑块无法控制视频。当滑块停放在视频所在的特定幻灯片上时，您可以编写手动代码来播放视频。

<!-- Jssor Slider Begin -->
<script type="text/javascript" src="../js/jssor.slider.min.js"></script>
<script>
    jssor_slider1_init = function () {
        var options = {
            $AutoPlay: 1
        };

        var jssor_slider1 = new $JssorSlider$('slider1_container', options);

        function SliderParkEventHandler(slideIndex, fromIndex)
        {
            if(slideIndex == 1)
            {
                //do something to play video when the slider parks at the second slide
            }
        }

        jssor_slider1.$On($JssorSlider$.$EVT_PARK,SliderParkEventHandler);
    };
</script>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
    height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
        <div></div>
        <div>
            <!-- assuming that you placed video in the second slide -->
            <video id="myvideo" width="320" height="240" controls autoplay>
                <source src="movie.mp4" type="video/mp4">
                <source src="movie.ogg" type="video/ogg">
                Your browser does not support the video tag.
            </video>
        </div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <!-- Trigger -->
    <script>
        jssor_slider1_init();
    </script>
</div>
<!-- Jssor Slider End -->

JSSOR AUTO PLAY VIDEO

2 个答案: