在猫头鹰内启动html5视频

我正在建立一个包含图像和视频的滑块的男性时尚网站。我使用owl.carousel作为滑块。该视频是一个平面HTML5视频标签。
我试图像这样开头的视频蒙山的jQuery：$('#video')[0].play();在猫头鹰内启动html5视频

它完美视频时滑块/旋转木马外，但我怎么里面开始呢？

Codepen link

来源

2016-11-08 Legarndary

我编辑了我的答案，请检查它。 –

我只是看看你的codepen。经过几次测试后，我看到两个带有类视频滑块的容器，里面有一个带有相同ID“视频”的视频标签。（使用调试控制台查看渲染视图和jQuery代码$(".video-slide").children()）。

您可以使用jquery代码$(".video-slide").children().each(function() { this.play(); });来启动videoS，但在您需要查找块的重复位置和原因之前。

我希望它能帮助

来源

2016-11-08 11:17:10 Fefux

我正在使用你的每个方法，每个功能，只是因为它更简单（在我的头上）。 dublicate幻灯片被猫头鹰循环选项所吸引，所以它们必须是dublicate。我已经删除了ID并使用了视频标签。我最终做了这个owl.find（'video'）。each（function（）{this.play（）;}）; – Legarndary

创建一个片段

$(function(){ 
 
       var owl; 
 

 
       $(document).ready(function() { 
 

 
        owl = $(".stage"); 
 

 
        owl.owlCarousel({ 
 
         autoplay: true, 
 
         autoplayHoverPause: true, 
 
         loop: true, 
 
         items: 1, 
 
         navigation: true, // Show next and prev buttons 
 
         slideSpeed: 300, 
 
         paginationSpeed: 400, 
 
         singleItem: true,afterAction: function(current) { 
 
          current.find('video').get(0).play(); 
 
         } 
 
        }); 
 
       }); 
 

 

 
      });

body { 
 
       background-color: #91a8d2; 
 
      } 
 

 
      .container { 
 
       margin-top: 50px; 
 
       max-width: 500px; 
 
      } 
 

 
      .stage .image-slide, .stage .video-slide { 
 
       display: block; 
 
       width: 100%; 
 
       height: 100%; 
 
      } 
 

 
      .stage .video-slide > video { 
 
       width: 100%; 
 
       height: auto; 
 
      }

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> 
 

 
     <link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css"> 
 

 
     <link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css"> 
 

 
     <script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script> 
 

 
<body> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-xs-12"> 
 
         <div class="stage"> 
 
          <div class="image-slide"> 
 
           <img src="http://imyourman.dk/demo/slide1.jpg"> 
 
          </div> 
 
          <div class="image-slide"> 
 
           <img src="http://imyourman.dk/demo/slide2.jpg"> 
 
          </div> 
 
          <div class="item"> 
 
           <video id="video"> 
 
            <source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay> 
 
            <source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg"> 
 
           </video> 
 
          </div> 
 
          <div class="image-slide"> 
 
           <img src="http://imyourman.dk/demo/slide3.jpg"> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </body>

我创建了一个HTML代码示例。请检查。

相应地设置你的CSS。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <meta name="robots" content="noindex, nofollow"> 
     <meta name="googlebot" content="noindex, nofollow"> 

     <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> 

     <link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css"> 

     <link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css"> 

     <script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script> 


     <style class="cp-pen-styles"> 
      body { 
       background-color: #91a8d2; 
      } 

      .container { 
       margin-top: 50px; 
       max-width: 500px; 
      } 

      .stage .image-slide, .stage .video-slide { 
       display: block; 
       width: 100%; 
       height: 100%; 
      } 

      .stage .video-slide > video { 
       width: 100%; 
       height: auto; 
      } 
     </style> 

     <title></title> 

     <script type='text/javascript'> 
      $(function(){ 
       var owl; 

       $(document).ready(function() { 

        owl = $(".stage"); 

        owl.owlCarousel({ 
         autoplay: true, 
         autoplayHoverPause: true, 
         loop: true, 
         items: 1, 
         navigation: true, // Show next and prev buttons 
         slideSpeed: 300, 
         paginationSpeed: 400, 
         singleItem: true,afterAction: function(current) { 
          current.find('video').get(0).play(); 
         } 
        }); 
       }); 


      }); 

     </script> 


    </head> 

    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs-12"> 
        <div class="stage"> 
         <div class="image-slide"> 
          <img src="http://imyourman.dk/demo/slide1.jpg"> 
         </div> 
         <div class="image-slide"> 
          <img src="http://imyourman.dk/demo/slide2.jpg"> 
         </div> 
         <div class="item"> 
          <video id="video"> 
           <source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay> 
           <source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg"> 
          </video> 
         </div> 
         <div class="image-slide"> 
          <img src="http://imyourman.dk/demo/slide3.jpg"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 

</html>

来源

2016-11-08 11:32:29

在猫头鹰内启动html5视频

回答

相关问题