Audio & Video
Audio and Video in HTML5 （HTML5中的音频和视频）
Earlier, native web technologies such as HTML didn’t allow embedding video and audio on the Web. Plugin-based technologies became popular for handling such content, but they had many problems, including not working well with HTML/CSS features, security and accessibility issues. Later, HTML5 specification introduced such features with the <video> and <audio> elements.
The <audio> element is used to embed audio files to a web page, and the <video> element is used to embed a video.
How to Add Audio on the Web Page
How to Add Audio on the Web Page （如何在网页上添加音频）
Before HTML5, audio files were added to the page by integrating background sound with the help of <bgsound> tag. The file was played while the page was viewed, and the user couldn’t mute the sound. In HTML5, we can embed audio files using the <audio> tag, and there is no need to connect third-party plugins. The audio element can be controlled with HTML or Javascript and styled with CSS.
In the code, the src attribute refers to the URL of the audio file, and the controls attribute adds a control panel (launch button, scroll bar, volume regulator). （在代码中， src属性引用音频文件的URL ， controls属性添加控制面板（启动按钮、滚动条、音量调节器）。）
<audio src="name.ogg" controls></audio>
Audio Codecs and Audio File Formats
Audio Codecs and Audio File Formats （音频编解码器和音频文件格式）
As not all browsers support all audio formats, the audio file is encoded/decoded with an audio codec (a digital electronic device or computer-based software application that aids in the compression and decompression of a digital audio data). All formats of audio files are added simultaneously via the <source> element with the src attribute.
When defining different file formats, we recommend to define MIME-type for each file, in order to let the browser localize supported file. The MIME-type is defined by the help of the type attribute. （定义不同的文件格式时，我们建议为每个文件定义MIME类型，以便浏览器本地化支持的文件。MIME类型由type属性的帮助定义。）
Example of adding different formats of audio files:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg">
<source src="/build/audios/audio.mp3" type="audio/mpeg">
</audio>
<p>Click the play button</p>
</body>
</html>
The most popular audio formats are the following ones:
MP3 – the most popular audio format, which uses lossy compression and permits to reduce the file size. Despite the popularity among the users, TV companies and radio stations use more modern codecs ISO-MPEG, like AAC or MPEG-H. （MP3 –最流行的音频格式，它使用有损压缩和许可来减小文件大小。尽管在用户中很受欢迎，但电视公司和广播电台使用更现代的ISO-MPEG编解码器，如AAC或MPEG-H。）
AAC (Advanced Audio Codec) — closed codec, MP3 analog, but comparing to the latter, it provides higher quality with the same or stronger compression degree. （AAC （高级音频编解码器） —封闭式编解码器， MP3模拟，但与后者相比，它以相同或更强的压缩度提供更高的质量。）
Ogg Vorbis— free format with an open code, supported in Firefox, Opera and Chrome. Provides good quality sound, but not sufficiently supported by device players. （Ogg Vorbis -开放代码的免费格式，支持Firefox、Opera和Chrome浏览器。提供高质量的声音，但未得到设备播放器的充分支持。）
How to Add Video Files
How to Add Video Files （如何添加视频文件）
In previous version of HTML, videos were embedded into the site via third-party plugins, such as QuickTime, RealPlayer or Flash. HTML5 has a new <video> tag, which is used to insert a video into the web page.
In a code, it looks like this:
<video src="example.webm" controls></video>
The src attribute indicates the URL of the file, and the controls attribute is used to display control elements. （Src属性指示文件的URL ， controls属性用于显示控件元素。）
Video Codecs and Video File Formats
Video Codecs and Video File Formats （视频编解码器和视频文件格式）
Each browser supports particular codec, that’s why, in order to provide video playback in all browsers, the video file must be placed in a few formats. Like in the case of audio files, all formats of video files are included in the <source> element, starting with the most preferred one. Every video file must have its MIME-type, which is defined by the type attribute.
To make sure, that the browser can process video files, create a file .htaccess in the folder, where the web site is situated, which defines MIME-types for a video. （为了确保浏览器可以处理视频文件，请在网站所在的文件夹中创建一个.htaccess文件，该文件定义了视频的MIME类型。）
Example of adding different formats of video files:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src=”http://techslides.com/demos/sample-videos/small.ogv” type="video/ogg">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4">
</video>
<p>Some information about video</p>
</body>
</html>
Today there are 3 basic video formats: MP4/MPEG-4, OGG and WebM +. For video data compression and their playback, we use codecs.
For a video file of the MPEG-4 format, the Н.264 video codec and ААС audio codec are used. If you want to use codecs, you must get a license. （对于MPEG-4格式的视频文件，使用Н .264视频编解码器和ААС音频编解码器。如果要使用编解码器，则必须获得许可证。）
For the Ogg video file, use the Theora video codec and the Vorbis audio codec with an open code. （对于Ogg视频文件，请使用Theora视频编解码器和带开放代码的Vorbis音频编解码器。）
For the video files of the WebM + format, use the VP8 video codec and the Vorbis audio codec. In this case, a license is not required. （对于WebM +格式的视频文件，请使用VP8视频编解码器和Vorbis音频编解码器。在这种情况下，不需要许可证。）
Most servers don’t serve Ogg or mp4 media with the correct MIME types. For this, you may need to add the appropriate configuration. （大多数服务器不提供具有正确MIME类型的Ogg或mp4媒体。为此，您可能需要添加适当的配置。）
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
How to Add Subtitles and Headings
How to Add Subtitles and Headings （如何添加字幕和标题）
Subtitles and headings are added to audio and video files via the <track> element, which is used as a child element of <audio> and <video>.
Example of adding subtitles and headings to audio and video files:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4" />
</video>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
（Lorem Ipsum只是印刷和排版行业的虚拟文本。自15世纪以来， Lorem Ipsum一直是业界标准的虚拟文本，当时一位不知名的打印机将一个类型的厨房拼凑起来制作了一本样本书。它不仅经历了五个世纪，而且还经历了电子排版的飞跃，基本保持不变。）
</p>
</body>
</html>
To align the video player on the page, place the <video> element into the <div> container, assign it a class, and then define the width and the height for it, corresponding to the size of your video.
Audio and Video Attributes
Audio and Video Attributes （音频和视频属性）
| Attribute | Description |
|---|---|
| autoplay | Allows the audio/video to automatically start playing while the rest of the page is loading. |
| autobuffer | Allows the audio/video to automatically begin buffering. |
| controls | Allows controlling the audio/video playback, including volume, pause/resume playback. |
| loop | Allows the audio/video to play again whenever it finishes. |
| muted | Makes the media play with the turned off sound by default. |
| preload | Specifies buffering large files. It can have one of these values: |
| “none”, which does not buffer the file. | |
| “auto”, which buffers the media file. | |
| “metadata”, which buffers only the metadata for the file. | |
| src | The URL of the audio/video to embed. It is optional. |
| poster | This is a URL of an image displayed before the video is played. |
| width | Specifies the display area width of the video, in CSS pixels. |
| height | Specifies the display area height of the video, in CSS pixels. |