在bootstrap 3.2中将HTML5视频或任何视频嵌入旋转木马滑块中

时间:2014-08-08 07:24:10

标签: html css twitter-bootstrap html5-video carousel

我想在旋转木马滑块中嵌入自适应视频,同时我想设置播放按钮,进度条,音量按钮的样式。怎么做?我也尝试设置框架的宽度和高度。它不能仅通过代码完成。所以我必须转换视频。尽管如此,它仍然不适合框架。有没有办法通过像图像这样的代码来做到这一点?我试过这些代码。请告诉我这段代码有什么问题。这是我的代码..

   <div class="slideshow">
                   <div class="container">
                       <div class="row">
                  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                      <div class="carousel-inner">
                            <div class="item active">
                                <div class="col-md-6">
                                      <video width="548" height="328" controls play>
                                          <source src="videos/Rio 2.mp4" type="video/mp4">
                                        Your browser does not support the video tag. 
                                      </video>
                                </div>
                              <div class="col-md-6 caption">
                                   <h1 class="text-uppercase same-style">The cool</h1>
                                   <h2 class="text-uppercase same-style">The minimal</h2>
                              </div>
                            </div>
                            <div class="item">
                                    <div class="col-md-6">
                                       <video id=0 controls width="548" height="328" controls play>
                                        <noscript><a href=http://www.freemake.com/free_video_converter/>video converter</a></noscript>
                                        <source src="videos/baku.mp4" type='video/mp4'>
                                        <p>Video is not visible, most likely your browser does not support HTML5 video</p>
                                       </video>
                                   </div>
                                   <div class="col-md-6 caption">
                                       <h1 class="text-uppercase same-style">The Cheerful</h1>
                                       <h2 class="text-uppercase same-style">The Cat</h2>
                                  </div> 
                             </div> <!--end of item-->
                             <div class="item">
                                    <div class="col-md-6">
                                       <video id=0 controls width="548" height="328" controls play>
                                        <noscript><a href=http://www.freemake.com/free_video_converter/>video converter</a></noscript>
                                        <source src="videos/movie-conv.mp4" type='video/mp4'>
                                        <p>Video is not visible, most likely your browser does not support HTML5 video</p>
                                       </video>
                                   </div>
                                   <div class="col-md-6 caption">
                                       <h1 class="text-uppercase same-style">The Nature</h1>
                                       <h2 class="text-uppercase same-style">The wonder</h2>
                                  </div> 
                             </div> <!--end of item-->
                            </div> <!--carousel-inner-->
                        </div> <!--end of carousel-generic --->
                      </div> <!--end of container > row -->
                  </div> <!--end of container -->
                  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                  </a>
                  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                  </a>
            </div> <!--end of slideshow-->

0 个答案:

没有答案