【HTML5移动开发学习笔记】03-CH5-Canvas，Video，Audio

版权声明：商业转载需要经过本人同意，敬上！ https://blog.csdn.net/weixin_41835977/article/details/89481677

H5媒体API

1.SVG-可伸缩矢量图形
针对形状，直线，曲线，图像，文本定义了XML语法，包括透明度，角度，几何形状，滤镜效果，脚本和动画等特性。
基于文本的图像格式，文件很小。
基于XML，根元素为<svg>，使用XML绘制。
例如以下的SVG：

<!DOCTYPE svg PUBLIC "">  <!-- DTD文档声明 -->
<svg xmlns="" height="200" width="320" version="1.0">
<title></title>
<decs></desc>
<rect x="" y="" width="" height="" style="fill:#FFFFFF; stroke:#e7e7e7;"/>
<circle cx="" cy="" r="" fill="#d60818"/>
</svg>

可以使用img，object，embed在文档中引入SVG
SVG：可访问的，通过SVG语法和JS以支持动画，Amaya支持SVG子集的免费软件。
2，Canvas-生成图画的JS API
使用canvas绘制的是像素，一旦绘制了就忘记了。
下面是一个使用的例子：

var canv = document.getElementById("flag");//querySeletor,byTagName[0]
	if (canv && canv.getContext){
		var context = canv.getContext("2d");
		if(context){
			// 设置边框外观
			context.fillStyle = "#FFFFFF";
			context.strokeStyle = "#cccccc";
			// 设置阴影
			context.lineWidth = 1;
			context.shadowOffsetX = 5;
			context.shadowOffsetY = 5;
			context.shadowBlur = 4;
			context.shadowColor = "rgba(0,0,0,0.4)";

			context.fillRect(10,10,300,300);
			context.shadowColor = "rgba(0,0,0,0)";
			
			context.beginPath();
			context.fillStyle = "#d60818";
			context.arc(160,107,60,0,Math.PI*2,false);
			context.closePath();
			context.fill();
		}
	}

Audio，Video

所有移动浏览器都支持。
视频格式支持：
MPEG4/h.264（.mp4）
Theora/Ogg(.ogv)
VP8

<video><audio> 的一些属性：
src=
autoplay
loop
controls
preload=none/metadata/auto
poster=预览图像
width=
height=

没有一个编解码器是所有浏览器都支持的，所以我们要给不同的浏览器提供不同的源。

所以有了source元素（src,type,media），允许指定多个媒体。

track元素-让视频和音频对听力有障碍的人是可访问的，连接到字幕文件的track。

使用JS控制Audio，Video，play()，pause()方法。
可以自己创建新方法。

引入背景音：使用JS控制

视频编码转换器：Handbrake