Question

我在我网站的主页上使用flexslider，目前其中有图像，这很好。但我想添加一个我自动播放的视频然后恢复滑块的动作。我认为我的问题在于格式化，因为我不熟悉HTML或CSS等。这是滑块的HTML：

    <div class="flexslider">
      <ul class="slides">
        <li class="slideVideo"></li>
        <li class="slide1"><a href="/portfolioMAIN.html#tabs-2"></a></li>
        <li class="slide2"><a href="/portfolioMAIN.html#tabs-1"></a></li>
        <li class="slide3"><a href="/portfolioMAIN.html#tabs-3"></a></li>
      </ul>
    </div>

这是CSS中的代码。

    ul.slides li { height:350px; }
    ul.slides li.slide1 a { background:url("/images/doorstop_carousel.png") 0 0 no-repeat; background-size:cover; height:350px; display:block; }
    ul.slides li.slide2 a { background:url("/images/brisant_carousel.png") 0 0 no-repeat; background-size:cover; height:350px; display:block; }
    ul.slides li.slide3 a { background:url("/images/eurosecure_carousel.png") 0 0 no-repeat; background-size:cover; height:350px; display:block; }
    ul.slides li.slideVideo a { background:url("/videos/ident.mp4") 0 0 no-repeat; background-size:cover; height:350px; display:block; }

非常感谢任何帮助。 PS视频上传到我的服务器

Answer 1

在 HTML5 中使用<video>代替背景mp4

<li class="slideVideo">
  <video width="480" height="320" controls="controls">
    <source src="/videos/ident.mp4" type="video/mp4">
  </video>
</li>

Answer 2

列表项中的用户HTML5 <video>标记。

 <video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
 </video>

点击此链接http://www.w3schools.com/html/html5_video.asp

我认为你应该看看这个很酷的演示。

http://www.menucool.com/slider/play-html5-video-or-audio-in-slider

HTML / CSS将视频添加到滑块

2 个答案: