HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 视频播放实例

我们在学习任何新东西的时候，直接从实例入手，先亲自动手操作他的整个运作过程，这样对于我们对新事物的认识和理解是非常深刻的，对于HTML5 播放视频，我们先看他如何编写，如下代码：

一、使用简单格式的video标签播放视频

<video src="movie.ogg"></video> <!-- src 属性表示视频文件的URL路径 -->

二、使用带有播放控件的video标签播放视频

<video src="movie.ogg" controls="controls"></video> <!-- controls 属性供添加播放、暂停和音量控件 -->
<video src="movie.ogg" width="320" height="240" controls="controls"></video>  <!-- 带有自定义长宽的视频播放窗口 -->

如果没有设置长宽属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

三、使用video标签的浏览器兼容提示功能

<video src="movie.ogg" width="320" height="240" controls="controls">
您的浏览器不支持video标签
</video>

在<video> 与 </video> 之间插入的内容可以在不支持 video 元素的浏览器中直接显示出来，但是不建议这样使用，建议开发者使用JS提前判断浏览器的兼容性。

四，使用video标签和source标签来提高浏览器播放视频的兼容性

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

在上面其他的例子中我们使用了一个 Ogg 的视频文件，它只适用于在Firefox、Opera 以及 Chrome 浏览器中进行播放。要想在 Safari 浏览器中进行播放，需要使用到MPEG4 类型的视频文件；video 标签允许包含多个 source 标签。source 标签可以链接不同的视频文件。浏览器将会在这些source 标签引入的视频文件中使用第一个可识别的视频格式进行播放。

作者文档