HTML MP4 嵌入问题

【问题标题】：HTML MP4 embed troubleHTML MP4 嵌入问题
【发布时间】：2012-11-15 14:04:09
【问题描述】：

我是 HTML 的初学者，需要一些帮助...这件事让我发疯了——我想在我的网站中嵌入一个 HTML sn-p，以便视频播放一次而不显示控件...我还希望它可以在许多浏览器上运行，经过 2 天的研究，我实现了下面的代码（哇哦！）。唯一麻烦的是，当我把代码放在程序中的sn-p中时，我无法控制它的位置（我想在它上面放一个小图，不能得到它后面的视频......）请帮我！代码可以修复还是您知道替代方案？（我不想修改标题部分或安装脚本）

<video wdith="600" height="300" autoplay>
  <source src="https://sites.google.com/site/privateforsharingfilesbytt/home/docs/Eng.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

screenshot 谢谢！

【问题讨论】：

似乎是定位和格式问题——与实际嵌入无关。
为清楚起见，您是否尝试将图像叠加在视频之上？

标签： html css video embed

【解决方案1】：

下面是一个在视频上覆盖img 的简单示例：

<div>
    <img id="overlay_img" src="http://i.imgur.com/i5Gp6.png" width="150" height="150" />

    <video width="560" height="340" controls>
        <source src="http://media.html5media.info/video.mp4" type='video/mp4' />
    </video>
</div>

JSFiddle Demo

这个想法是使用img 标记放置图像。然后，我给图像一个id，以便我可以调整它在 CSS 中的位置。为了让图像实际覆盖在视频之上，我做了position: absolute，它允许我设置元素相对于其祖先的位置。

如果您想在图像周围移动，则需要指定top、left、bottom、right 定位值。

【讨论】：