写在前面

知识点

  • HTML5 视频
  • HTML5 音频

HTML5 视频

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

视频格式和浏览器支持
格式 浏览器
.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+

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <video src="http://labfile.oss.aliyuncs.com/courses/1248/video.ogg" width="320" height="240" controls="controls">
            你的浏览器不支持video元素
        </video>
    </body>
</html>
video 标签的属性如下所示
属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮
height pixels 设置播放器的高度
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放
muted muted 规定视频的音频输出应该被静音
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前现实的图像
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用"autoplay"，则忽略该属性
src url 要播放的视频的URL
width pixels 设置视频播放的宽度

字幕的简单使用

使用常用的 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 指的是默认会显示的字幕。例如两个 元素，如果都没有 default 属性，那都不显示，需要用户手动调出。另外，default 只能出现在一个 元素上。

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        ::cue{
            color: red;
        }

        </style>
    </head>
    <body>
        <video src="http://labfile.oss.aliyuncs.com/courses/1248/video.ogg" width="320" height="240" controls="controls">
            你的浏览器不支持video元素
            <track src="video_ch.vtt" srclang="en" kind="subtitles" label="中文" default>
            <track src="video_en.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></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元素
        </audio>
    </body>
</html>

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

audio标签的属性如下所示
属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮
loop loop 如果出现该属性，则当音频文件完成播放后重新开始播放
muted muted 规定音频输出应该被静音
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用"autoplay"，则忽略该属性
src url 要播放的音频的URL
赏

zxyaily