HTML5新元素
五.HTML5 Video(视频)
1.HTML5 (视频)- 如何工作
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
- HTML5 规定了一种通过 video 元素来包含视频的标准方法。
<video>
元素提供了 播放、暂停和音量控件来控制视频。- 同时
<video>
元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。<video>
与</video>
标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。- <
video>
元素支持多个<source>
元素. <source>
元素可以链接不同的视频文件。浏览器将使用第一个
2.视频格式与浏览器的支持
当前, 元素支持三种视频格式: MP4, WebM, 和 Ogg:
3.视频格式
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
HTML5 - 使用 DOM 进行控制
HTML5 和 元素同样拥有方法、属性和事件。
video和 audio元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说, 元素开始播放、已暂停,已停止,等等。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
4.HTML5 Video 标签
六.HTML5 Audio(音频)
HTML5 规定了在网页上嵌入音频元素的标准,即使用 audio>元素。
HTML5 Audio - 如何工作
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。
在<
audio>
与</audio>
之间你需要插入浏览器不支持的<audio>
元素的提示文本 。
<audio>
元素允许使用多个<source>
元素.<source>
元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件
音频格式及浏览器支持
音频格式的MIME类型
HTML5 Audio 标签