利用<video></video>我们可以实现如下功能：
- 控制视频的播放
- 创建自己的定制的视频界面
- 使用全新的方式集成视频与HTML的其余部分。
在HTML加入视频功能需要添加如下代码：
<video controls autoplay src="video/preroll.mp4" width="480" height="360"
poster="images/prerollposter.jpg" id="video">
- controls 属性表示，播放器会提供控件，允许用户控制视频和音频的播放。
- autoplay 属性表示一旦加载视频就开始播放。
- src 代表视频源位置
- poster 表示如果不设置autoplay的话，在开始播放之前，视频显示的图片
- loop 属性会使视频播放结束后自动的重新开始。
- preload 通常用来细粒度的控制如何加载视频来实现优化。如果把preload设置为none,则在用户播放之前不下载任何视频。
视频格式
- mp4 容器，包含H.264视频和AAC音频， MP4/H264得到了Safari和IE9+的支持，一些版本的Chrome也提供了支持。
- WebM 容器，包含VP8视频和Vorbis音频。 WebM由google设计用来处理VP8编码视频。WebM/VP8得到Firefox,Chrome和Opera的支持。webm格式的视频扩展名为.webm
- Ogg 容器，包含Theora视频和Vorbis音频。 Theora是一个开源解码器。采用Theora编码的视频通常包含在Ogg文件中，文件扩展名为.ogv 。 Ogg/Theora得到了Firefox， Chrome和Opera的支持。
如何处理这些视频格式
1。我们可以在<video>元素中对应每种格式使用一个<source>元素，这样能提供一组视频，每个视频分别有自己的格式，可以让浏览器选择它支持的第一种格式。
<video id = "video" poster="video/prerollposter.jpg" controls width="480" height="360">
<source src="video/preroll.mp4">
<source src="video/preroll.webm">
<source src="video/preroll.ogv">
<p>Sorry, 你的浏览器不支持这些视频格式</p>
</video>
浏览器从上向下查找，知道找到他能播放的一种格式。
- 更具体的指定视频格式
上面告诉浏览器视频源的位置，使他能在不同版本中作出选择。不过，浏览器真正确定一个文件是否可以播放，还需要做一个检测工作。我们可以为浏览器提供更多帮组，给出有关视频文件的MIME类型和编码器。
<video id = "video" poster="video/prerollposter.jpg" controls width="480" height="360">
<source src="video/preroll.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2” '>
<source src="video/preroll.webm" type='video/webm; codecs="vp8, vorbis" '>
<source src="video/preroll.ogv" type='video/ogg; codecs="theota, vorbis" ’>
<p>Sorry, 你的浏览器不支持这些视频格式</p>
</video>
- type 是一种可选属性，他向浏览器提供了一个提示，帮组它确定能不能播放这种类型的文件。
- ‘video/mp4’ 这种type类型是一种MIME类型，制定了容器格式,注意其单引号。
- codecs参数指定使用哪个编解码器对视频和音频编码，来创建编码的视频文件。其中
codecs="avc1.42E01E, mp4a.40.2”第一个参数表示视频编码器，第二个参数表示音频编码器。
注意：type 和codecs中的单双引号的位置。
Video在javaScript中的API
1. 调用的方法：
| 方法名 | 功能 |
|---|---|
| play() | 播放视频 |
| pause() | 暂停视频 |
| load() | 加载视频 |
| canPlayType | 通过编程帮组你确定可以播放哪些视频类型 |
2. 使用的属性
| 属性名 | 作用 |
|---|---|
| videoWidth | 播放器的宽度 |
| videoHeight | 播放器的高度 |
| currentTime | 播放的当前时间 |
| duration | duration 属性返回当前音频/视频的长度，以秒计 |
| ended | ended 属性返回音频/视频是否已结束。 |
| error | 错误原因 |
| loop | 是否可以循环 可以修改属性 |
| muted | 当设置该属性后，它规定视频的音频输出应该被静音。 |
| readyState | 就绪状态指示音频/视频是否已准备好播放。 |
| seeking | 寻址中（Seeking）指的是用户在音频/视频中移动/跳跃到新的位置。 |
| volume | volume 属性设置或返回音频/视频的当前音量。 |
3. 捕获这些事件
下面这些是可以捕获的事件，如果增加事件处理程序，出现你监听的事件时就会调用相应的事件处理程序。
| 事件名称 | 作用 |
|---|---|
| play | 播放器开始播放的事件 |
| pause | 播放器开始暂停的事件 |
| progress | 当浏览器正在下载指定的音频/视频时，会发生 progress 事件。 |
| error | 当浏览器播放发生错误时 |
| timeupdate | timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。 |
| ended | 当浏览器播放当前视频结束触发 |
| abort | 该事件是在多媒体数据终止下载时触发，而不是发生错误时触发。 |
| waiting | waiting 事件在视频由于需要缓冲下一帧而停止时触发。。 |
| loadeddata | 当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。 |
| loadedmetadata | 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。 |
| volumechange | 当浏览器音量发生变化时触发。 |
实现一个视频的播放
//js
var position = 0; //定义一个变量来记录我们播放的哪个视频
var playlist; // 保存视频播放列表数组
var video; //保存video元素的引用
window.onload = function() {
playlist = ["video/preroll",
"video/areyoupopular",
"video/destinationearth"];
video = document.getElementById('video');
video.addEventListener("ended", nextVideo,false); //监听事件
video.src = playlist[position] + getFormatExtension();
video.load();
video.play();
}
function nextVideo() {
position++;
if (position >= playlist.length) {
position = 0;
}
video.src = playlist[position] + getFormatExtension();
video.load();
video.play();
}
function getFormatExtension() {
if (video.canPlayType("video/mp4") != "") {
return ".mp4";
} else if (video.canPlayType("video/ogg") != "") {
return ".ogv";
} else if (video.canPlayType("video/webm") != "") {
return ".webm";
}
}
- canPlayType方法用来取一个视频格式为参数，返回一个字符串，表示浏览器对于播放这种类型的视频有多大的信心。共有三个等级:很可能(probably) 可能(maybe)和空。
给视频加上特效
主要方法是利用两层画布来创建特效，上面的画布显示完成的特效，下面的画布来实现一个scratch缓冲区，来操作每帧视频的rgb颜色值。
//window.onload方法中添加事件
video.addEventListener("play", processFrame, false); //获取每帧视频
function processFrame(e) {
var video = document.getElementById("video");
if (video.paused || video.ended) {
return;
}
var bufferCanvas = document.getElementById("buffer");
var displayCanvas = document.getElementById("display");
var buffer = bufferCanvas.getContext("2d");
var display = displayCanvas.getContext("2d");
//缓冲区获取画布的大小，并且把当前帧的视频转化为图片
buffer.drawImage(video, 0, 0, bufferCanvas.width, bufferCanvas.height);
var frame = buffer.getImageData(0, 0, bufferCanvas.width, bufferCanvas.height);
var length = frame.data.length / 4;
for (var i = 0; i < length; i++) {
var r = frame.data[i * 4 + 0];
var g = frame.data[i * 4 + 1];
var b = frame.data[i * 4 + 2];
if (effectFunction) {
effectFunction(i, r, g, b, frame.data); //是执行像素转换的方法
}
}
display.putImageData(frame, 0, 0);
setTimeout(processFrame, 0); //设置为0是为了获取每一帧视频
// try this line instead of the setTimeout above if you are on Chrome
//requestAnimationFrame(processFrame);
}
//effectFunction方法的匿名函数
function noir(pos, r, g, b, data) {
var brightness = (3*r + 4*g + b) >>> 3;
if (brightness < 0) brightness = 0;
data[pos * 4 + 0] = brightness;
data[pos * 4 + 1] = brightness;
data[pos * 4 + 2] = brightness;
}
function western(pos, r, g, b, data) {
var brightness = (3*r + 4*g + b) >>> 3;
data[pos * 4 + 0] = brightness+40;
data[pos * 4 + 1] = brightness+20;
data[pos * 4 + 2] = brightness-20;
data[pos * 4 + 3] = 255; //220;
}
知行办公，专业移动办公平台https://zx.naton.cn/
【总监】十二春秋之，3483099@qq.com；
【Master】zelo，616701261@qq.com；
【运营】运维艄公，897221533@qq.com；****
【产品设计】流浪猫，364994559@qq.com；
【体验设计】兜兜，2435632247@qq.com；
【iOS】淘码小工，492395860@qq.com；iMcG33K，imcg33k@gmail.com；
【Android】人猿居士，1059604515@qq.com；思路的顿悟，1217022114@qq.com；
【java】首席工程师MR_W，feixue300@qq.com；
【测试】土镜问道，847071279@qq.com；
【数据】fox009521，42151960@qq.com；
网友评论