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

使用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>

Answer 2

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

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

如何在carousel bootstrap 3中添加视频

2 个答案: