1.向网页中添加视频
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>向网页中添加视频</title>
</head>
<body>
<video src="movie.mp4"
poster="Play-button.jpg" width="400" height="300"
preload
controls
loop>
<p>A video of a puppy playing in the snow</p>
</video>
</body>
</html>
使用<video>元素的很多特性用于控制视频的播放
src:该特性指定视频的路径。
poster:在视频加载时或在视频播放之前，该特性用于指定在播放器中显示的一个图像。
width，height:这两个特性用像素值指定播放器的大小。
controls:如果使用了该特性，就表示浏览器需要提供默认的播放控件。
autoplay:表示视频文件应该自动播放。
loop:如果使用了该特性，就表示在视频结束之后重新播放。
preload:该特性告诉浏览器在页面加载时需要做什么，他有三个值可选:
{
none:该值表示在用户按下播放按钮之前，浏览器不必加载视频。
auto:改制表示浏览器应该在页面加载时载入视频。
metadata:该值表示浏览器只需收集少量视频信息，比如大小、首帧图像、播放列表和持续时间。
}
2.多个视频源
示例:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>多个视频源</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<video poster="images/puppy.jpg" width="400"
height="320" preload controls loop>
<source src="video/puppy.mp4" type='video/mp4;
codecs="avcl.42E01E,mp4a.40.2"'/>
<source src="video/puppy.webm" type='video/webm;codecs="vp8,vorbis"'/>
<p>A video of a puppy in the snow</p>
</video>
</body>
</html>
要指定播放文件的路径，可以在<video>元素中使用<source>元素。<source>元素可以代替起始标签<video>中的src特性。可以使用多个<source>元素来指定不同格式的视频。
src:该特性用于指定文件的路径。
type:需要使用该特性来告诉浏览器视频的格式。
codecs:用来对视频进行编码的解编码器也在type特性中给出。
3.向网页中添加HTML5音频
示例:
<!DOCTYPE html>
<html>
<head>
<title>向网页中添加HTML5音频</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<audio src="audio/test-audio.ogg"
controls autoplay>
<p>This is browser does not support our audio format.</p>
</audio>
</body>
</html>
<audio>元素包含许多可以控制音频播放的特性。
src:该特性用于指定音频文件的路径。
controls:该特性表明播放器是否显示播放控件。
autoplay:该特性的出现表示音频应该自动开始播放。
preload:该特性在播放器没有设置autoplay时告诉浏览器应该做什么。
loop:表示音频播放结束以后进行重新播放。
4.多个音频源
示例:
<!DOCTYPE html>
<html>
<head>
<title>多个音频源</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<audio controls autoplay>
<source src="audio/test-audio.ogg"/>
<source src="sudio/test-audio.mp4"/>
<p>This browser does not support our audio format.</p>
</audio>
</body>
</html>
在起始标签<audio>和结束标签</audio>之间使用<source>元素可以指定多个音频文件（<source>元素可以替代起始标签<audio>中的src特性)。
src:<source>元素使用src特性来表示音频文件位于何处。