直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

 <style>
/* 首页 */
.index-com-box{padding:50px 0;padding-bottom:80px;}
.index-com-box .index-com-title{font-size:30px;text-align:center;color:#000;font-weight: bold; line-height: 50px;}
.index-com-box .index-com-descption{text-align: center;font-size:14px;line-height: 20px;color:#444;;margin-bottom:40px;}
/* 首页--视频块 */
.item-video{border:1px solid #999;padding:15px;margin:5px;}
.item-video h4{text-align: center;}

</style>

HTML+JS代码

 <section class="index-com-box bg-eee ">
  <div class="container">
      <h3 class="index-com-title">更多精彩，与您分享</h3>
      <p class="index-com-descption">创想智能家居不只是新一代的智能家居，更体现了我们所执着的愿景。<br />
          它将一种超乎寻常的强大力量放到你的指尖之上，让即使是处理复杂的工作，也只需要一点就能轻松完成。
      </p>
      <div class="col-md-4 pm">
          <div class="item-video">
              <video poster='http://www.bootfastui.cn/img/2021/0508-4/index_video.png' width='100%' height='200' controls preload>
                  <source src="http://www.bootfastui.cn/img/2021/0508-4/video.mp4" media=" only screen and (min-device-width:800)">
                  </source>
                  您的浏览器不支持 HTML5 video 标签。
              </video>
              <h4>功能展示</h4>
              <br />
          </div>
      </div>
      <div class=" col-md-4 pm">
          <div class="item-video">
              <video poster='http://www.bootfastui.cn/img/2021/0508-4/index_video2.png' width='100%' height='200' controls preload>
                  <source src="http://www.bootfastui.cn/img/2021/0508-4/video.mp4" media=" only screen and (min-device-width:800)">
                  </source>
                  您的浏览器不支持 HTML5 video 标签。
              </video>
              <h4>智能家居影院</h4>
              <br />
          </div>
      </div>
      <div class=" col-md-4 pm">
          <div class="item-video">
              <video poster='http://www.bootfastui.cn/img/2021/0508-4/index_video4.png' width='100%' height='200' controls preload>
                  <source src="http://www.bootfastui.cn/img/2021/0508-4/video.mp4" media=" only screen and (min-device-width:800)">
                  </source>
                  您的浏览器不支持 HTML5 video 标签。
              </video>
              <h4>多智能生活块</h4>
              <br />
          </div>
      </div>

    

  </div>
</div>