HTML/CSS 将视频添加到滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29122126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS adding a video to a slider
提问by damocoaten
I am using flexslider on the homepage of my website and currently have images within it, which is fine. But I want to add a video I created which plays automatically and then resumes the action of the slider. I think my problem is in the formatting as I am not at all skilled in HTML or CSS etc. Here is the HTML for the slider:
我在我网站的主页上使用了 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>
and this is the code in the CSS.
这是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; }
Any help is much appreciated. PS the video is uploaded to my server
任何帮助深表感谢。PS视频已上传到我的服务器
回答by Manwal
In HTML5use <video>instead of background mp4
在HTML5 中使用<video>而不是背景mp4
<li class="slideVideo">
<video width="480" height="320" controls="controls">
<source src="/videos/ident.mp4" type="video/mp4">
</video>
</li>
回答by Ajay
User HTML5 <video>tag in you list item.
<video>列表项中的用户 HTML5标记。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Check this link http://www.w3schools.com/html/html5_video.asp
检查此链接http://www.w3schools.com/html/html5_video.asp
I think you should look at this cool demo.
我认为你应该看看这个很酷的演示。
http://www.menucool.com/slider/play-html5-video-or-audio-in-slider
http://www.menucool.com/slider/play-html5-video-or-audio-in-slider
