如何在轮播引导程序 3 中添加视频

Question

我想在我的网站上有一个画廊。我是引导世界的新手，所以我想知道你们是否可以帮助我。底部是我的源代码，当我单击图像时，它只会显示图片的大预览，所以我想做的是让它成为一个带有控件的视频。我希望你能理解并帮助我。顺便说一句，我正在编辑一个模板网站，所以我真的不知道如何修复这个。

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div id="gallerySLide" class="gallery_area">
                <a href="videos/1.mp4" title="This is Title">
                    <img class="gallery_img" src="img/gallery/img-small1.jpg" alt="img" />
                <span class="view_btn">View</span></a>
            </div>
        </div>
    </div>
</div>

图片：https://ibb.co/mtZNLk https://ibb.co/mns3RQ

Answer 1

您可以使用 HTML 5 中的 video 元素嵌入视频，controls 属性将显示视频的控件。

<div id="gallerySLide" class="gallery_area">
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
    </video>
</div>

Answer 2

使用video标签，如果存在不支持的浏览器，将显示消息

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div id="gallerySLide" class="gallery_area">
                <video title="This is Title" poster="img/gallery/img-small1.jpg" controls>
                    <source src="videos/1.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
    </div>
</div>