前端之家

  1. 首页
  2. 问答

在模板中嵌入html5视频/更改视频图像

• 问答

我是这里的新手，仍然在学习如何编写HTML和CSS。我正在从模板制作我的投资组合。现在我有一些要嵌入和使用gif图像的运动图像。只有它们变得太大，所以我想切换到html5视频。

只有当我将<img更改为<video时，整个画廊才会倒塌。因此，我猜CSS不支持html5视频。

现在是html：

<div class="ms-section__block">
          <div id="gallery">
            <img alt="image 2"
            src="assets/images/gallery/social/gif2.gif"
            data-description="image placeholder"> 
            <img alt="image 2"
            src="assets/images/gallery/social/gif2.gif"
            data-description="image placeholder"> 
            <img alt="image 2"
            src="assets/images/gallery/social/gif2.gif"
            data-description="image placeholder">

CSS主：

.ms-section__block {
    width: 85%;
    max-width: 88em;
    margin: 0 auto 6em;

这是我唯一能找到的与html代码相关的内容。 但是再说一次。我是一个菜鸟，希望大家能帮我如何使用.gif更改工作的.mp4来减小文件大小。

卢卡斯

我正在使用的模板是Emily-创意摄影作品集

zhang_alex34 回答：在模板中嵌入html5视频/更改视频图像
  

只有当我将<img>更改为<video>时，整个画廊才会倒塌。

问题不明显。您发布的所有代码所做的就是将三个项目并排放置。我可以将其中一项更改为<video>标签。我无法重现崩溃。

如果下面的代码不是您所需要的，则链接示例页面，该页面显示实际的“折叠”问题。

<!DOCTYPE html>
<html>

<style>

.ms-section__block 
{
    width: 85%;
    max-width: 88em;
    margin: 0 auto 6em;
}

</style>

<body>

<div class="ms-section__block">
    <div id="gallery">
    <img alt="image 2"
    src="assets/images/gallery/social/gif2.gif"
    data-description="image placeholder">

    <video width="320" height="240" controls>
    <source src="yourVideoFile.mp4" type="video/mp4">
    </video>

    <img alt="image 2"
    src="assets/images/gallery/social/gif2.gif"
    data-description="image placeholder">

    </div>
</div>

</body>
</html>
for-loophtmlimagevideo
本文链接：https://www.f2er.com/3097825.html

大家都在问