多站点都会使用到视频. HTML5 提供了展示视频的标准。
检测您的浏览器是否支持 HTML5 视频:
检测
Web站点上的视频
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.
注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。
HTML5 (视频)- 如何工作
如需在 HTML5 中显示视频,您所有需要的是:
实例
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
视频格式与浏览器的支持
当前, <video> 元素支持三种视频格式: MP4, WebM, 和 Ogg:
浏览器 | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | NO | NO |
Opera | YES (从 Opera 25 起) | YES | YES |
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
视频格式
格式 | MIME-type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。
<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法有用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。
例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。
实例 1
为视频创建简单的播放/暂停以及调整尺寸控件:
播放/暂停 放大 缩小 普通
上面的例子调用了两个方法:play() 和 pause()。它同时使用了两个属性:paused 和 width。
HTML5 Video 标签
标签 | 描述 |
---|---|
<video> | 定义一个视频 |
<source> | 定义多种媒体资源,比如 <video> 和<audio> |
<track> | 定义在媒体播放器文本轨迹 |
希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)
学习深入理解HTML5的audio和video。
在HTML5播放一个视频,很简单,只需要一行代码:
<video src="resources/dadaqianduan.mp4" autoplay></video>
了解视频文件格式:
Audio Video InterLeaved .avi
Flash Video .flv
MPEG-4 .mp4
Matroska .mkv
Ogg .ogv
音频和视频编解码器
编解码器可以理解为一些算法代码,用于处理视频,音频或者其元数据的编码格式。对音频或视频文件进行编码,可使得文件大大缩小,便于在因特网上传输。
音频编解码器:
MP3,使用ACC音频
Wav,使用Wav音频
Ogg,使用OggVorbis音频
视频编解码器:
MP4,使用H.264视频,AAC音频
WebM,使用VP8视频,OggVorbis音频
Ogg,使用Theora视频,OggVorbis音频
audio元素支持的音频格式MP3,Wav,Ogg;video元素支持的格式MP4,WebM,Ogg。
在HTML5中audio和video元素提供的接口包含了一系列的属性,方法和事件,这些接口可以帮助开发完成对音频和视频的操作。
那么如何在页面中添加音频和视频呢?
音频
<audio src="resources/audio.mp3">
</audio>
视频
<video src="resources/video.mp4" width="600" height="200">
</video>
因为各种浏览器对音频和视频的编解码器的支持不一样,为了能够在各种浏览器中正常使用,可以提供多个源文件。
<audio src="resources/audio.mp3">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
</audio>
<video src="resources/video.mp4" width="600" height="200" controls>
<source src="movie.ogg" type="video/ogg codes=`theora,vorbis` ">
<source src="movie.mp4" type="video/mp4">
</video>
使用source元素替代了audio或video的标签属性src。
元素的标签特性
<video src="resources/video.mp4" autoplay></video>
<video src="resources/video.mp4" controls></video>
<video src="resources/video.mp4" controls loop></video>
<video src="resources/video.mp4" controls preload="auto"></video>
<video src="resources/video.mp4" controls poster="images/none.jpg"</video>
<video src="resources/video.mp4" width="600" height="200" controls></video>
接口属性
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>视频播放时的快进</title>
<script type="text/javascript">
function Forward() {
var el = document.getElementById("myPlayer");
var time = el.currentTime;
el.currentTime = time+300;
}
</script>
</head>
<body>
<video id="myPlayer" src="resources/video.mp4" width="600" height="200" controls>
</video>
<br/>
<input type="button" value="快进" onclick="Forward()"/>
</body>
</html>
接口方法
代码示例使用接口:
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>播放与暂停</title>
<script type="text/javascript">
var videoEl = null;
function Play() {
videoEl.play();
}
function Pause() {
videoEl.pause();
}
window.onload = function(){
videoEl = document..getElementById("myPlayer");
}
</script>
</head>
<body>
<video id="myPlayer" width="600">
<source src="resources/video.mp4" type="video/mp4">
</video><br>
<input type="button" value="播放" onclick="Play()"/>
<input type="button" value="暂停" onclick="Pause()"/>
</body>
</html>
捕获事件的方式
捕获事件有两种方法:一种是添加事件句柄,一种是监听。
<video id="myPlayer" src="resources/video.mp4" width="500" onplay="video_playing()">
</video>
// 监听方式
var videoEl = document.getElementById("myPlayer");
videoEl.addEventListener("play",video_playing);
接口事件
定义全局的视频对象
代码如下:
<script type="text/javascript">
// 定义全局视频对象
var videoEl = null;
// 网页加载完毕后,读取视频对象
window.addEventListener("load", function() {
videoEl = document.getElementById("myPlayer")
});
</script>
添加进度显示功能
代码如下:
<script type="text/javascript">
function Progress() {
var el = document.getElementById("progress");
el.style.width = (videoEl.currentTime/videoEl.duration)*720 + "px"
document.getElementById("info").innerHTML = s2time(videoEl.currentTime) + "/" + s2time(videoEl.duration);
}
function s2time(s) {
var m = parseFloat(s/60).toFixed(0);
s = parseFloat(s%60).toFixed(0);
return (m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
}
window.addEventListener("load",function(){videoEl.addEventListener("timeupdate",Progress)});
window.addEventListener("load",Progress)
添加静音和调节音量的功能
消除静音videoEl.muted=false;静音效果videoEl.muted=true;videoEl.volume=e.value;修改音量的值。
添加慢进和快进功能
多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
在HTML5中,video元素目前支持三种格式的视频文件,
1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
3.WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
那么在HTML5中如何显示视频呢?例子如下:
<video src="demo.mp4" width="500" height="250" controls="controls">您的浏览器不支持此种视频格式。</video>
好了,现在来解释下video元素中各属性的含义,其中width、height就不解释了啊,主要说下controls,顾名思义,controls 就是控件们,哈哈,就是视频的播放、音量暂停等控件。video元素中间插入的汉字,聪明的你一定知道的,是提示用户浏览器不支持视频格式使用的。
需要注意的是,要确保适用于Safari 浏览器,视频文件必须是 MP4类型。而ogg格式的视频则是适用于Firefox、Opera 以及Chrome 浏览器。Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。
当然了,我们如果不确定自己的浏览器支持什么格式的视频,可以先检测一下。若是不想麻烦,那怎么办呢?我们可以这样:
<video width="500" height="250" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持此种视频格式。
</video>
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式,这样我们只要多准备几个不同格式的视频就可以了。
接下来,介绍几个video标签的属性,
1.autoplay :出现该属性意味着视频在就绪后将自动播放,用法:autoplay="autoplay"
2.controls :出现该属性意味着向用户显示控件,如播放按钮等,用法:controls="controls"
3.height:设置高度
4.width:设置宽度
5.loop:自动重播,用法:loop="loop"
6.preload:视频在页面加载时进行加载并预备播放,用法:preload="auto"
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
注意:若使用了autoplay,则忽略preload
7.src:要播放视频的url
更多嵌入式、物联网、安卓、Java、HTML5等请继续关注华清远见成都中心!
*请认真填写需求信息,我们会在24小时内与您取得联系。