html5_02 video, audio, Canvas

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.