HTML5学习笔记（二）

最新推荐文章于 2022-07-14 20:27:25 发布

君鹏不姓贾

最新推荐文章于 2022-07-14 20:27:25 发布

阅读量592

点赞数

分类专栏：我的学习记录

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

版权

我的学习记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML5学习笔记

——2014.08.11-2014.08.15

HTML5视频（续）

这一段是接着上周的学习内容而进行的。主要实在上周实践了HTML5 video元素后，一些理论知识的记述，和进一步的实践。

一、关键概念：

容器：视频（音频）文件本质是一个容器文件，盛装了音频轨道、视频轨道和其他一些元数据。上回我们提到的MPEG4，Ogg等都是视频容器的格式。

编解码器：本质上是一组算法，用于对音频和视频进行编解码，编码是为了使音视频文件在网络上可以较快的传输，与编码相对的就是解码。

二、HTML5的局限

1. 目前HTML5食品规范中还没有比特率切换标准，所以对视频的支持只限于加载全部媒体文件。

2. HTML5的媒体受到HTTP跨源资源共享的限制。

3. 全屏视频无法通过脚本控制

三、video的应用

上周所做的实验中IE8不能支持HTML5的video，因此出现了

通过在video元素中嵌入显示Flash视频的Object元素，可以解决这一问题。意思是如果浏览器支持HTML5 video那么就优先显示HTML5 video，Flash 视频作为后备。

代码如下：

<!DOCTYPEHTML>

<html>

<body>

<videosrc="movie.mp4" width="320" height="240"controls="controls">

</object>

Your browser doesnot support the video tag.

</video>

此时用IE8打开就会在提示前出现一个播放Flash视频的位置，如下图所示，因为电脑上并没有视频的文件，所以只会有一个白块。

下一步，嵌入video元素中的替代内容只有在浏览器不支持video元素时才显示。使用WebVTT，可以在视频中设置字幕等。效果如下图

红框圈出的就是字幕的控制，因为没有视频所以字母不会显示出来。

简单的VTT文件编写，如下所示

WEBVTT

00:00:01.000 --> 00:00:04.000

What do you think about HTML5 Video and WebVTT?

00:00:05.000 --> 00:00:10.000

I think it's great. I can't wait for the browsers to support it!

文件开头的第一行必须以单词WEBVTT开头，vtt文件以text/vtt的MIME类型标记。WEBVTT中还可以设置要显示文字的一些特征，使用时可以通过手册查询。

写好WEBVTT文件后，需要在video元素中添加<track>，<track>元素可以添加多个，指向不同的字幕。代码如下

<videosrc="movie.mp4" width="640" height="480"controls="controls">

Yourbrowser does not support the video tag.

</video>

<track>的主要参数及左右如下

kind	定义字幕内容类型，只能是这五种之一: subtitles, captions, descriptions, chapters, metadata.
src	字幕文件的URL地址
srclang	字幕文件的语言类型，标识信息的作用，播放器不使用这个属性。
label	字幕标签，每个字幕元素必需设置一个唯一不重复的标签，切换字幕时显示的名称。
default	指定是否是默认字幕。如果每个都不指定，将不会自动显示字幕.

前面所述都是Video元素的一些简单运用，video元素可以被HTML5 Canvas的函数调用，做出更为复杂的运用。这些复杂的运用会在学习到Canvas时再学习。

Html5 音频

这一段是学习HTML5的audio元素的记录。现在网页上的音频多数是通过插件来播放的，如果没有安装插件就会不能播放，不同的网页会有不同的插件，这就给使用者带来了很大的困扰。

一、HTML5 audio元素支持的格式

	IE9	Fierfox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		支持	支持	支持
MP3	支持			支持	支持
Wav		支持	支持		支持

二、如何使用

audio与video类似，基本的结构是

浏览器不支持audio时要显示的信息

</audio>

具体代码如下

<!DOCTYPEHTML>

<html>

<body>

<audiosrc="song.ogg" controls="controls">

Your browser does not support the audio tag.

</audio>

</body>

</html>

运行结果如下图

Chrome36.0运行结果

IE8.0运行结果

audio 与video类似，可以使用多个source，代码如下：

<!DOCTYPE HTML>

<html>

<body>

<sourcesrc="song.ogg" type="audio/ogg">

<sourcesrc="song.mp3" type="audio/mpeg">

Your browser does not supportthe audio tag.

</audio>

</body>

</html>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL

君鹏不姓贾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记（二）

HTML5学习笔记——2014.08.11-2014.08.15HTML5视频（续）这一段是接着上周的学习内容而进行的。主要实在上周实践了HTML5 video元素后，一些理论知识的记述，和进一步的实践。一、关键概念：容器：视频（音频）文件本质是一个容器文件，盛装了音频轨道、视频轨道和其他一些元数据。上回我们提到的MPEG4，Ogg等都是视频容器的格式。编解码器：本质上是一
复制链接

扫一扫

专栏目录