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