整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5 Video(视频)

多站点都会使用到视频. 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:

浏览器MP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYES (从 Opera 25 起)YESYES
  • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式

格式MIME-type
MP4video/mp4
WebMvideo/webm
Oggvideo/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>定义在媒体播放器文本轨迹

希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)

学习深入理解HTML5audiovideo

HTML5视频概述

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,Oggvideo元素支持的格式MP4,WebM,Ogg

  • audio元素是专门用于在网页中播放网络音频的
  • video元素是专门用于在网页中播放视频的

HTML5audiovideo元素提供的接口包含了一系列的属性,方法和事件,这些接口可以帮助开发完成对音频和视频的操作。

那么如何在页面中添加音频和视频呢?

音频

<audio src="resources/audio.mp3">
</audio>

视频

<video src="resources/video.mp4" width="600" height="200">
</video>

使用source元素

因为各种浏览器对音频和视频的编解码器的支持不一样,为了能够在各种浏览器中正常使用,可以提供多个源文件。

<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元素替代了audiovideo的标签属性src

  1. src属性用于指定媒体文件的url地址
  2. type属性用于指定媒体文件的类型,属性值为媒体文件的MIME类型,该属性值还可以通过codes参数指定编码格式

audiovideo特性和属性

元素的标签特性

  1. src,源文件特性,用于指定媒体文件的url地址
  2. autoplay,自动播放特性,表示媒体文件加载后自动播放。
<video src="resources/video.mp4" autoplay></video>
  1. controls,控制条特性,表示为视频或音频添加自带的播放控制条。
<video src="resources/video.mp4" controls></video>
  1. loop,循环特性,表示音频或视频循环播放。
<video src="resources/video.mp4" controls loop></video>
  1. preload,预加载特性,表示页面加载完成后如何加载视频数据。
  • none表示不进行预加载
  • metadata表示只加载媒体文件的元数据
  • auto表示加载全部视频或音频,默认值为auto
<video src="resources/video.mp4" controls preload="auto"></video>
  1. postervideo元素独有的特性,替代内容属性,用于指定一副替代图片的url地址,当视频不可以用时,会显示该替代图片。
<video src="resources/video.mp4" controls poster="images/none.jpg"</video>
  1. widthheightvideo元素独有的特性,用于指定视频的宽度和高度
<video src="resources/video.mp4" width="600" height="200" controls></video>

接口属性

  1. currentSrc,只读,获取当前正在播放或已加载的媒体文件的url地址
  2. videoWidth,只读,video元素特有属性,获取视频原始的宽度
  3. videoHeight,只读,video元素特有属性,获取视频原始的高度
  4. currentTime,获取或设置当前媒体播放位置的时间点
  5. startTime,只读,获取当前媒体播放的开始时间
  6. duration,只读,获取整个媒体文件的播放时长
  7. volume,获取或设置媒体文件播放时的音量,取值范围在0.00.1之间
  8. muted,获取或设置媒体文件播放时是否静音。true表示静音,false表示消除静音
  9. ended,只读,如果媒体文件已经播放完毕则返回true,否则返回false
  10. error,只读,读取媒体文件的错误代码
  11. played,只读,获取已播放媒体的TimesRanges对象,该对象内容包括已播放部分的开始时间和结束时间。
  12. paused,只读,如果媒体文件当前是暂停或未播放则返回true,否则返回false
  13. seeking,只读,获取浏览器是否正在请求媒体数据
  14. seekable,只读,获取媒体资源已请求的TimesRanges对象,该对象内容包括已请求部分的开始时间和结束时间
  15. networkState,只读,获取媒体资源的加载状态
  16. buffered,只读,获取本地缓存的媒体数据的TimesRanges对象
  17. readyState,只读,获取当前媒体播放的就绪状态
  18. playbackRate,获取或设置媒体当前的播放速率
  19. defaultPlaybackRate,获取或设置媒体默认的播放速率

视频播放的快进

<!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>

audiovideo接口方法

接口方法

  1. load(),加载媒体文件,为播放做准备。
  2. play(),播放媒体文件。
  3. pause(),暂停播放媒体文件。
  4. canPlayType(),测试浏览器是否支持指定的媒体类型。

代码示例使用接口:

<!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>

audiovideo事件

捕获事件的方式

捕获事件有两种方法:一种是添加事件句柄,一种是监听。

<video id="myPlayer" src="resources/video.mp4" width="500" onplay="video_playing()">
</video>

// 监听方式
var videoEl = document.getElementById("myPlayer");
videoEl.addEventListener("play",video_playing);

接口事件

  1. play,当执行方法play()时触发
  2. playing,正在播放时触发
  3. pause,当执行了方法pause()时触发
  4. timeupdate,当播放位置被改变时触发
  5. ended,当播放结束后停止播放时触发
  6. waiting,在等待加载下一帧时触发
  7. ratechange,在当前播放速率改变时触发
  8. volumechange,在音量改变时触发
  9. canplay,以当前播放速率需要缓冲时触发
  10. canplaythrough,以当前播放速率不需要缓冲时触发
  11. durationchange,当播放时长改变时触发
  12. loadstart,当浏览器开始在网上寻找数据时触发
  13. progress,当浏览器正在获取媒体文件时触发
  14. suspend,当浏览器暂停获取媒体文件,且文件获取并不是正常结束时触发
  15. abort,当终止获取媒体数据时触发
  16. error,在获取媒体过程中出错时触发
  17. emptied,当所在网络变为初始化状态时触发
  18. stalled,在浏览器尝试获取媒体数据失败时触发
  19. seeking,在浏览器正在请求数据时触发
  20. seeded,在浏览器停止请求数据时触发

定义全局的视频对象

代码如下:

<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=truevideoEl.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等请继续关注华清远见成都中心!