HTML5的学习记录

最新推荐文章于 2024-09-11 17:25:08 发布

君鹏不姓贾

最新推荐文章于 2024-09-11 17:25:08 发布

阅读量606

点赞数

分类专栏：我的学习记录文章标签： html5 学习笔记

本文链接：https://blog.csdn.net/junpengbuxingjia/article/details/38563877

版权

4 篇文章 0 订阅

订阅专栏

最近开始学习HTML5，用的是《HTML5从入门到精通》这本书。这里把自己的学习笔记放上来，算是个保存，也算是个对自己的激励吧。

开始先看了些HTML5的简介，无非是些特性啊，有点啊，历史沿革这一类的，在百度百科HTML5的词条中都有详细的记述，所以这部分就略去不记了。

从video开始吧。

一、当前video元素支持的视频格式

当前video元素支持的视频格式有三种：Ogg（带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件）；MPEG4（带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件）；WebM（带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件）。

下表展示了不同格式与浏览器版本的对应关系：

二、如何工作

在HTML5中显示视频只需要下面这两行代码

</video>

说明：

control是用于添加播放、暂停和音量控件

<video>与</video >之间写入当浏览器不支持video元素时的提示信息；

在<video>中还可以指定宽度和高度属性,格式如下（红色字体指定宽度和高度）：

随后使用记事本建立了一个文件，并写入如下代码

<!DOCTYPEHTML>

<html>

<body>

<videosrc="/i/movie.ogg" width="320" height="240"controls="controls">

Your browser doesnot support the video tag.

</video>

修改后缀名为html或者htm，然后用IE8打开，显示效果如图

用Chrome 36.0打开，效果如下图

上面的例子也可以将<video>中的src单独用source写出，改写成下面这种形式，系统会自动识别第一个可以用的格式。

<!DOCTYPE HTML>

<html>

<body>

Your browser does not support the video tag.

</video>

显示效果和上面是一致的。

在<video>中还可以设置很多属性，如将controls="controls"改为controls="autoplay"视频就会在就绪后立刻播放；loop属性可以使视频文件循环播放。

关注

专栏目录