5.2 HTML的视频之路
HTML5不仅让我们能够更具语义，而且使得向网站添加视频就像ABC一样简单。所需要的简单标记为：
<video src="gordoinspace.webm"></video>
在默认情况下，浏览器不会显示任何播放控件，用户需要打开上下文菜单来使用这一标记播放视频。如果未正确设置该视频的width和height，在浏览器计算尺寸期间，也会在页面加载时看到一个干扰图像一闪而过。而且用户对于他们要看的内容无法进行快进。为了改进这种状况，我们可以添加poster和controls特性及其尺寸。
<video src="gordoinspace.webm" width="720" height="405" poster="poster.jpg" controls>
</video>
Html5中定义的标准的全局特性有：
accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
itemid
itemprop
autoplay（自动播放）：告诉浏览器，视频一旦下载便开始播放。
controls（控件）：显示浏览器原生的内置控件。基本控件包括：播放/暂停按钮、定时器、音量控制以及时间刷等。
crossorigin（跨源域共享）：允许或禁止使用CORS对该视频进行跨域共享。
height（高度）：标明视频的高度。
loop（循环）：告诉浏览器，视频结束后循环播放。
mediagroup（媒体组）：通过创建一个媒体控制器，可以将多个媒体元素链接在一起。因此，你可以对多个视频或视频与音频进行同步。
muted（静音）：让作者指定视频开始时是否静音。
poster（贴画）：标识一幅静态图像的位置以作为一幅定格帧。
preload（预载）：让作者能够通知浏览器页面加载后是否立即下载该视频。preload已经代替了autobuffer（自动缓冲）特性。
src（源地址）：标识视频文件的位置（注意：当有子元素source时，该特性不是必需的）。
width（宽度）：标识视频的宽度。
loop、autoplay、preload以及controls都是Boolean特性，意即若代码中有此关键字，则其值为true。
5.2.1 视频格式
视频容器与编解码器
我们用以关联视频的文件扩展名有.mp4、.avi以及.flv等，它们本身并不是编解码器，而是一种容器格式。这如同zip或rar文件能够在其中容纳数种文件类型一样，视频容器格式所做的也是同样的事情。应该将容器格式视为”如何存储数据“，而将编解码器视为”如何理解和播放数据“。
为了实现跨浏览器的HTML5视频，我们需要了解三种容器格式：
WebM：是加入HTML5家族的最新容器格式。
Ogg：是一种无任何专利约束的开放标准容器格式。Ogg的视频编解码器叫做Theora，配套的音频编解码器为Vorbis。
MPEG-4：基于Apple的QuickTime容器格式MOV，它关联的文件扩展名为.mp4和.m4v。MPEG4的消极面试专利障碍。
我们已经介绍了感兴趣的容器格式，但是具体的编解码器又是社么呢？我们关注以下三种：
VP9：是一个开放的视频编解码器，没有任何已知的专利阻碍，其视频质量类似于H.264，预计在未来几年将会得到进一步发展。
Theora：Theora等同于VP3，一般和Ogg容器一起使用，但它的质量远低于VP8和H.264。
H.264：由MPEG团队开发，其设计目标是在比以前的标准还低的比特率上创建高质量的视频。它可以和大多数容器格式一起使用，但其不足是受MPEG-LA专利保护限制。
5.2.2 浏览器支持
5个主流浏览器全部支持HTML5的video。
5.2.3 添加视频源
对于目前的video元素，我们只能添加一个src特性。我们可以用JavaScript来检测浏览器的支持情况，并用相应的文件对之进行服务。不过，更保险的办法是使用source元素。
source让我们能够指定用于媒体元素的多个可选视频。这是一个不可见元素，意即浏览器不会渲染它的内容，以指示它在文档中的可见性外观。
<video poster="poster.jpg" controls width="720" height="405">
<source src="gordoinspace.mp4" type="video/mp4">
<source src="gordoinspace.webm" type="video/vp8">
<source src="gordoinspace.ogv" type="video/ogg">
Download <a href="gordoinspace.webm">Gordo in Space </a> the movie
</video>
注意：对于Ogg的视频指定type特性时，必须将它指定为video/ogg，而不是video/ogv，这个特别会引起错误，因为该文件类型的扩展名为.ogv。
浏览器将播放第一个可理解格式的视频。举个简单的例子，chrome中，它能够播放所有格式，故它会播放上例中的MP4文件。如果浏览器不能理解视频的类型，会简单地跳转到下一个source元素知道发现一个可以理解的类型为止。所以，source元素的顺序相当重要：MP4必须作为第一个，WebM应该放在第二位，这是由于它的质量高于Ogg，Ogg则放在第三位。
再谈老朋友Flash
但是对于旧版IE，我们需要信赖老朋友Flash先生来帮助我们支持。
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="720" height="429">
<param name="movie" value="player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=gordoinspace.mp4&image=poster.jpg" />
<embed type="application/x-shockwave-flash" id="player2" name="player2" src="player.swf" width="720" height="429" allowscriptaccess="always" allowfullscreen="true" flashvars="file=file=gordoinspace.mp4&image=poster.jpg" />
</object>
将Flash的object与前面示例结合在一起，我们终于有了一个可以访问、跨浏览器的、原生的解决方案。
5.2.4 track元素
source并不是可用于原生视频的唯一元素，还有一个后来加入HTML5规范的元素track，其目的是让作者能够为视频或音频指定一个外部的同步轨道或者数据。track只能用作video或audio媒体元素的子元素，其用法：
<video src="gordoinspace.webm" width="720" height="405" poster="poster.jpg" controls>
<track kind="subtitles" src="gordo_subtitles.vtt" />
</video>
track可以采用以下特性（若未指定，默认使用subtitles）：
default（默认）：以其中使用该特性的track元素为默认轨道，除非用户的喜好已指示有另一种更合适的track。
kind（种类）：描述track元素所提供的信息类型，它可以采用以下的值：
subtitles（字幕）：对话的副本或翻译文本
captions（简短说明）：类似于subtitles，但也可以包含声音效果或其他相关音频信息。适用于音频不可用时。
descriptions（描述）：为视频不可用时提供该媒体元素的一个文本描述。
chapters（章节）：定义章节标题，以便对媒体元素的内容进行导航。
metadata（元数据）：包括媒体元素的信息和内容，默认情况下不会显示给用户。如果愿意，可以用JavaScript暴露这些信息。
label（标签）：为文本轨道定义一个用户可读 的标题。
src（源地址）：文本轨道数据的URL。
srclang（源语言）：文本轨道数据的语言。
由于它太新了，目前尚未得到任何浏览器的支持。在此之前，最好的变通方法就是使用JavaScript填充材料来提供支持。
WebVTT
这是一种用于标记外部文件轨道的文件格式，改革是以前叫WebSRT，目前颇有争议，而且也是最新的。
5.2.6 卸掉沉重的负担
如果想编写并记住实现跨浏览器视频的所有代码，这看起来似乎很难，但是可以通过工具进行实现。
1.JW Player
2.Player
3.MediaElement.js
4.VideoJS
5.SublimeVideo
5.3 音频
以下是给页面添加audio的标记：
<audio src="gordo_interview.ogg" controls></audio>
正如你能看到的，它的工作方式与video十分相似，并且共享了一些同样的特性和API。
audio和video公用的特性有：
src
controls
autoplay
preload
loop
muted
crossorigin
mediagroup
不需要在HTML中指定audio的宽度和高度。
5.3.1 音频编解码器
Vorbis：这是一个无任何专利限制的开放编解码器，它通常被封装在Ogg容器中，但也可以封装在 WebM或其他容器中。
MP3：是一个已标准化的受专利保护的编解码器。
AAC：它有专利保护，与MP3不同的是可以定义多个配置文件。
WAV：它是PC上存储音频的标准。WAV文件一般都很大，因为他们不适合流式音频。
MP4：主要用于视频，但它也可以用于音频。
5.4 Canvas
5.4.1 基于像素的自由
与SVG不同，canvas是基于像素（光栅）的，因此可以快速渲染但难以缩放。这也意味着如果想要修改则需要重绘整个画布。canvas可以用来创建游戏、图表、图形和交互图形等。
5.4.2 添加/实现canvas
为了在文档中实现canvas并开始绘图，我们需要做两件基本的事情。
（1）在文档中添加一个canvas元素
（2）使用JavaScript获得上下文
向文档中添加canvas与添加其他任何元素一样。
<!DOCTYPE HTML>
<html lang="en_UK">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<canvas width="640" height="480" id="outerspace"></canvas>
</body>
</html>
为了定义绘画区域，在HTML中需要明确设置canvas的宽度与高度。如果不设置，默认为300*150px。为其提供一个id让我们能够在脚本中对该元素进行定位。
默认情况下，canvas是透明的，我们需要使用JavaScript，才能进行真正炫耀我们的绘画技能。
1.2D上下文
<script>
var canvas=document.getElementById('outerspace');
var ctx=canvas.getContext('2d');
</script>
为了得到更好的可访问性，我们可以再往前进一步，并使用渐进式JavaScript，以防止不支持的浏览器出现错误，这个只需要加一个简单的if语句就可以取得这一效果。
<script>
var canvas=document.getElementById('outerspace');
if(canvas.getContext){
var ctx=canvas.getContext('2d');
}else{
//canvas not supported do something
}
</script>
现在，我们将开始绘画。为了轻松一些，我们先从一个简单的矩形开始。为此我们使用fillRect（填充矩形）方法，并声明一些特性作为x轴的起始位置、y轴的起始位置、宽度和高度。声明坐标时，用于canvas的网络（或坐标）空间的起始点是左上角，正方向为x轴向右，y轴向下。
<script>
var canvas=document.getElementById('outerspace');
if(canvas.getContext){
var ctx=canvas.getContext('20');
//set the size and shape (x,y,width,height)
ctx.fillRect(180,180,240,120);
}
</script>
最后我们添加一个onload函数，并在文档中添加了脚本。
canvas学习对于我来说目前并不是很重要，所以这里我就不进行深入学习，仅对基础操作进行记录即可。（以下摘自W3CSchool内容）
创建一个画布（Canvas）
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
注意: 默认情况下 <canvas> 元素没有边框和内容。
<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
提示:你可以在HTML页面中使用多个 <canvas> 元素.
使用 style 属性来添加边框:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</body>
</html>
使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
实例解析:
首先，找到 <canvas> 元素:
var c=document.getElementById(“myCanvas”);
然后，创建 context 对象：
var ctx=c.getContext("2d");
getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
Canvas 坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
坐标实例
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。
Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 “ink” 的方法，就像stroke()。
实例
定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
实际上我们在绘制圆形时使用了 “ink” 的方法, 比如 stroke() 或者 fill().
实例
使用 arc() 方法 绘制一个圆:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
Canvas - 文本
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体 fil
lText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText():
实例
使用 “Arial” 字体在画布上绘制一个高 30px 的文字（实心）：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
使用 strokeText():
实例
使用 “Arial” 字体在画布上绘制一个高 30px 的文字（空心）：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():
实例
创建一个线性渐变。使用渐变填充矩形:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
使用 createRadialGradient():
实例
创建一个径向/圆渐变。使用渐变填充矩形：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y)
使用图像:
实例
把一幅图像放置到画布上:
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
5.5 SVG
SVG不是HTML5的一部分，但是HTML5可以嵌入内联SVG，这也是我们能在这里找到SVG的原因。
5.5.1 向量的威力
顾名思义，SVG文件是基于向量的，意即它们能够被缩放，而不会损失图像质量。它可以实现canvas的许多效果。一个主要的区别是，每个SVG元素都会成为 DOM的一部分，这样每个对象都能够被索引，并提供了一个可访问性更好的解决方案。
canvas和SVG的选择
SVG内容可以是静态的、活动的或交互的。这意味着SVG相对可访问的，但对于较为复杂的形状，可能会降低渲染速度。
相比较之下，canvas使用JavaScriptAPI，这让我们能够进行程序绘图。因为没有相应的DOM节点，你只能专注于绘制，而不能随着图像复杂度的增加而取得同样的性能。也可以将结果保存为PNG或JPG图像。
SVG比较适用于数据图表和分辨率独立的图形、动画交互的用户界面或矢量图像编辑。canvas适合于游戏、位图图像处理、光栅图形以及图像分析。
由于SVG在整体HTML5相对于我来说不是重点，所以这块就不贴大量代码解释了。这里只演示SVG的一般使用方法——
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www./2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
|
