【笔记】html5入门（第二篇）

最新推荐文章于 2024-04-18 05:00:00 发布

执笔思华年

最新推荐文章于 2024-04-18 05:00:00 发布

阅读量151

点赞数

分类专栏： html5 实习记录

本文链接：https://blog.csdn.net/abcdefggggghk/article/details/99646267

版权

实习记录同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html5

1 篇文章 0 订阅

订阅专栏

知识点

HTML5 视频介绍

HTML5 音频介绍

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

HTML5 视频介绍

视频格式和浏览器支持如下所示：

格式	浏览器
.ogg	FireFox 3.5+ ，chrome 5.0+ ，Opera 10.5+
.mp4/H.264	Safari 3.0+ ，chrome 5.0+ ，IE 9.0+
.webm	FireFox 4.0+ ，chrome 6.0+ ，Opera10.6+

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>my video page</title>
    </head>
    <body>
        <video width="320" height="240" controls="controlds">
            //<source src="http://labfile.oss.aliyuncs.com/courses/1248/video.ogg" type="video/ogg">
            <source src="http://labfile.oss.aliyuncs.com/courses/1248/video.mp4" type="video/mp4">
                你的浏览器不支持video元素
        </video>

    </body>
</html>

注：<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。video 元素允许多个 source 元素，source 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。

引入单个文件也可以这样写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>my video page</title>
    </head>
    <body>
        <video src="http://labfile.oss.aliyuncs.com/courses/1248/video.mp4" 
         width="320" height="240" controls="controlds">
            你的浏览器不支持video元素
        </video>
    </body>
</html>

video 标签的属性如下所示：

字幕的简单使用

使用常用的 WebVtt 字幕格式，在 <video> 中使用 <track> 元素引入字幕。例如：

<track src="http://labfile.oss.aliyuncs.com/courses/1248/video_ch.vtt" srclang="zh"   kind="subtitles" label="中文" default>
<track src="http://labfile.oss.aliyuncs.com/courses/1248/video_en.vtt" srclang="en" kind="subtitles" label="English">

track 元素属性说明：

src：指定资源 url。
srclang：资源的语言，例如：中文 zh，英文 en。
kind：默认值是 subtitles 字幕，captions 标题、音效及其他音频信息，descriptions 视频的文本描述，chapters 章节导航，metadata 元数据。
label：选择字幕时候出现的文字。
default：default 指的是默认会显示的字幕。例如两个 <track> 元素，如果都没有 default 属性，那都不显示，需要用户手动调出。另外，default 只能出现在一个 <track> 元素上。

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>my page</title>
    </head>
    <body>
        <video src="http://labfile.oss.aliyuncs.com/courses/1248/video.mp4"
        width="320" height="240" controls="controls">
        <track src="http://labfile.oss.aliyuncs.com/courses/1248/video_ch.vtt" 
               srclang="zh" kind="subtitles" label="中文" default>
        <track src="http://labfile.oss.aliyuncs.com/courses/1248/video_ch.vtt"   
               srclang="en" kind="subtitles" label="English">                
        </video>
    </body>
</html>

通过上面的案例，了解了简单的视频制作以及为视频添加字幕和切换字幕。同样的我们还可以为字幕设置样式，通过设置专门的伪元素 ::cue 来控制字幕的样式。可以控制的 css 属性包括：color，opacity，visibility，text-decoration 及相关属性，text-shadow，background 及相关属性，outline 及相关属性，font 及相关属性包括 line-height，white-space，text-combine-upright，ruby-position。

HTML5 音频介绍

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

音频格式和浏览器支持如下所示：

格式	浏览器
.ogg	FireFox 3.5+，chrome 3.0+，Opera 10.5+
.mp3	Safari 3.0+，chrome 3.0+，IE 9.0+
.wav	FireFox 3.5+，Safari 3.0+，Opera10.5+

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>my video page</title>
    </head>
    <body>
        <audio controls="controls">
            <source src="http://labfile.oss.aliyuncs.com/courses/1248/video.ogg"
                    type="audio/ogg">
            <source src="http://labfile.oss.aliyuncs.com/courses/1248/phone.mp3"
                    type="audio/mpeg">
            你的浏览器不支持
        </audio>
    </body>
</html>

注：<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。audio 元素允许多个 source 元素，source 元素可以链接不同的音频文件，浏览器将使用第一个可识别的格式。

引入单个文件也可以这样写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>my video page</title>
    </head>
    <body>
        <audio src="http://labfile.oss.aliyuncs.com/courses/1248/phone.mp3"
                controls="controls">
                你的浏览器不支持vid元素
        </audio>
    </body>
</html>

audio 标签的属性如下所示：