如何使用 html5 嵌入视频？答案

【问题标题】：How do I embed a video using html5?如何使用 html5 嵌入视频？
【发布时间】：2015-08-16 05:09:32
【问题描述】：

您好，我正在构建一个网页，我拥有其他所有内容，但我不知道如何使用 html5 嵌入视频？这在我的网站中非常重要，因此非常感谢您的帮助。

【问题讨论】：

Youtube 有一些信息 (youtube.com/html5) 还有一些基本信息 (html5rocks.com/en/tutorials/video/basics)

【解决方案1】：

<video id="myMovie" width="640" height="360" poster="video.png"  >
     <source src="20140810_131405.mp4">
</video>

使用视频标签。海报属性是缩略图。显然源链接到实际的视频文件。

【讨论】：

【解决方案2】：

在 HTML5 之前，视频只能通过插件（如 flash）播放。 HTML5 元素指定了在网页中嵌入视频的标准方式。

 <video width="420" height="340" controls>
  <source src="sample_movie.mp4" type="video/mp4">
  <source src="sample_movie.ogg" type="video/ogg">
Your browser does not support the video tag.
 </video>

controls 属性添加视频控件，例如 play, pause, and volume。

最好始终包含width 和height 属性。

如果height和width没有设置，浏览器不知道视频的大小。效果是页面会在视频加载时发生变化（或闪烁）。

<video> 和 </video> 标记之间的文本只会在不支持该元素的浏览器中显示。

src 属性可以是音频文件的 URL 或本地系统上文件的路径。多个<source> 元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式，换句话说，它将选择第一个适用的格式。在上述情况下，如果它识别出type="video/mp4"，它将立即选择那个。（通常碰巧击败不同版本的浏览器）。如果您希望自动开始电影，只需像这样使用autoplay 属性：

 <video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

如需深入阅读：w3schools 和 MDN

【讨论】：