1, HTML5 new features of video playback--video:
① Example: <video src= "" ></video>
The ②video tag defaults to 300*150 Inline-block;
③ member Properties:
AutoPlay: whether to play automatically;
CONTROLS: Whether the playback controls are displayed;
CurrentTime: The current time to play;
Duration: total length of time;
Defaultmuted: Default is mute;
Loop: Does the loop play automatically;
Muted: is currently muted;
Paused: Whether it is currently in a paused state;
Poster: "", the display picture before the video is played;
Volumn: current playback volume;
Preload: Preload content, Value: auto--automatically preload video content and buffer a paragraph; metadata--only preload movie elements (wide and high); none--do not preload any data;
④ member Methods:
Play ();--the video starts playing and the paused property becomes false;
Paused ();--video paused, paused property changed to true;
⑤ member Events:
onplay:fn--triggered when the V.paly () method is called;
onpause:fn--triggered when the V.pause () method is called;
2, HTML5 new features of audio playback--audio:
① Example: <audio src= "" ></audio>
The ②audio tag defaults to 300*30 Inline-block, and display is none if the playback control is not displayed;
③ member Properties:
AutoPlay: whether to play automatically;
CONTROLS: Whether the playback controls are displayed;
CurrentTime: The current time to play;
Duration: total length of time;
Defaultmuted: Default is mute;
Loop: Does the loop play automatically;
Muted: is currently muted;
Paused: Whether it is currently in a paused state;
Poster: "", the display picture before the video is played;
Volumn: current playback volume;
Preload: Preload content, Value: auto--automatically preload audio elements according to content, and buffer a paragraph; metadata--only pre-load audio elements; none--does not preload any audio data;
④ member Methods:
Play ();--the audio starts playing and the paused property becomes false;
Paused ();--Audio paused, paused property changed to true;
⑤ member Events:
onplay:fn--triggered when the V.paly () method is called;
onpause:fn--triggered when the V.pause () method is called;
⑥ios system comes with Safari browser does not support audio tags, you can use the hidden video instead;
3, HTML5 new features of the canvas drawing:
①canvas: Canvas, default to 300*150 Inline-block, the width of the canvas can not use CSS Style, can only use the width and Height properties;
②canvas The canvas itself cannot draw content, only for hosting the content being drawn, the brush is created using native JS: Var ctx=canvas.getcontext (' 2d ');
③context Object Common Properties:
FillStyle: "#000000"--fill style;
Strokestyle: "#000000"--stroke/contour style;
Font: "10px sans-serif"--font size, type
TextAlign: "Start"--text alignment;
Textbaseline: "Alphabetic"--text baseline;
globalalpha:--Global opacity;
LineWidth: Line/stroke width;
Shadowoffsetx: The offset of the shadow on the x-axis;
Shadowoffsety: The offset of the shadow on the y-axis;
Shadowcolor: "Rgba (0,0,0,0)"-shadow color and transparency;
Shadowblur: Shadow blur radius;
Common methods for ④context objects:
Arc (): Draws an arc/circle;
Beginpath (): Start drawing a path;
Closepath (): Closes a path;
Fill (): Fills the path;
Stroke (): strokes the path;
MoveTo (): Move to a point;
LineTo (): Draws a line segment to another point;
FillRect (): Fills a rectangle;
Strokerect (): Stroke a rectangle;
Clearrect (): Clears all content within a rectangular range;
Filltext (): Fills a string;
Stroketext (): Stroke a string;
DrawImage (): Drawing images;
⑤ Create a linear gradient object:
var g=ctx.createlineargradient (x1,y1,x2,y2);
G.addcolorstop (Offset1,color1);
G.addcolorstop (OFFSET2,COLOR2);
⑥ Draw Rectangle (Rectangle): Anchor point in upper left corner
Ctx.fillstyle= "#000"/gradient object;--fill style;
Ctx.strokestyle= "#000"/gradient object;--stroke style;
ctx.linewidth=;--stroke width;
Ctx.fillrect (x,y,w,h);--fills a rectangle;
Ctx.strokerect (x,y,w,h);--stroke a rectangle;
Ctx.clearrect (x,y,w,h);--Clears the contents of a rectangular range;
⑦ drawing text: Text anchor at the far left of the entire string text baseline
Ctx.textbaseline= "alphabetic";//text baseline, the desired value is: top/middle/alphabetic/bottom;
ctx.font= "10px Sans-serif";
Ctx.filltext (Txt,x,y);
Ctx.stroketext (Txt,x,y);
Ctx.measuretext (TXT). width;//measure text width;
html5_02 video, audio, Canvas