JSSOR AUTO PLAY VIDEO

Question

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

使用下面的代码我可以让它在网页中播放，但当放入滑块在一个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

现在，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 --> 

Answer 2

大家很奇怪，我设法得到它这是怎么回事：

<!-- #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 -->