1.video

2, video label standard syntax (compatible processing)

'<video> <source SRC =" video file URL address "/> <source SRC =" video file URL address" /> <source SRC =" video file URL address "/> Browsers do not support video prompt text </video>' // The browser will use the first recognized videoCopy the code

3. Video label attributes

  • Width the width of the
  • Height height

The following values are Boolean values:

  • Controls display play native controls (poor compatibility)
  • Loop play
  • Autoplay Autoplay video (most browsers disable this feature)
  • Mute play
  • Poster Displays the advertisement before the video is played. The value is the URL of the advertisement (disadvantage: the advertisement picture cannot be displayed if the video is paused)
  • Preload The default video preloading mode is Auto. Note: After this parameter is set, the video is loaded when the page is loaded and ready to play. Ignore this property if “autoplay” is used.)

4. Use DOM to manipulate videos

HTMLVideoElement properties

Var vdo = document.getelmentById ("video") //2. Gets/sets the width/height of the object (0 if it is not set). Vdo.videowidth vdo.videoheight // Vdo.addeventlistener (" LoadedData ",()=>{console.log(vde.videowidth) Console. log(vde.videoheight)}) // LoadedData event indicates that the first frame of the video has been loaded. After the first frame is loaded, the original width and height of the video can be accessed normally. Get vdo.poster = 'myVideo.mp4'Copy the code
HTMLMediaElement propertiesCopy the code
<script> //autoplay whether to autoplay //muted whether //controls whether to display play controls //loop Whether to loop // SRC USED to set the URL address of media files //volume Vdo. volume = 0.6 //playbackRate obtains and sets the playbackRate of the media. 1.0 is the normal rate. //currentTime Gets and sets the current playing time of the media object, in seconds. // Duration Total time of obtaining the media object, in seconds. // The play() method is used to play the media Veo.pause () var play = document.getelementById ("play") play.onclick = ()=>{// Determine whether the video is paused  if(vdo.paused==false){ vdo.pause(); }else{ vdo.play(); AddEventListener ("play",()=>{}) // VDO. AddEventListener (" Pause ",()=>{}) // VDO is triggered when the media object finishes playing Vdo.addeventlistener (" Ended ",()=>{}) // Triggered when the first frame of the media file is loaded // Vdo.addeventListener (" timeupData ",()=>{}) is called when the currentTime property of the media object changes vdo.addEventListener("canplaythrough",()=>{}) </script>Copy the code

2.audio

1. Standard syntax for audio labels

<audio> <source SRC =" audio file URL"/> <source SRC =" audio file URL"/>Copy the code

2. Audio label properties

<script> //controls //autoplay // fraternal //loop //preload // and video are the same </script>Copy the code

3, HTMLAudioElement constructor: var ado=new Audio([Audio file URL]) ==> 1. var ado=new Audio(“./myaudio. 2.ado.controls=true; 3.document.body.appendChild(ado)

4.HTMLMediaElement

3. Full screen mode (compatibility hate)

1, full-screen mode compatible writing method

< script > / / into full screen mode compatible writing function requestFullScreen (element) {if (element. RequestFullScreen) {element. RequestFullScreen ();  } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); RequestFullScreen (document.documentElement); RequestFullScreen (document.getelementById ("vdo")); Function exitFullScreen() {if(document.exitfullscreen) {document.exitfullscreen (); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if(document.msExitFullscreen){ document.msExitFullscreen(); }} //exit //exitFullscreen(); p1.onclick = ()=>{exitFullscreen()} </script>Copy the code

2. Full screen properties and events

< script > / / whether the current browser allows full-screen set state document. The fullScreenEnabled / / to get full screen page elements document. FullscreenElement / / start full screen or exit full screen when triggered Fullscreenchange // Compatible // FullScreenError is triggered when you fail to start or exit fullscreen // Compatible </script>Copy the code

4.canvas

2

<script>
	var cvs = document.getElementById("canvas")
	var ctx = cvs.getContext(2D)
</script>
Copy the code

CanvasRenderingContext2D object

1. Draw graphs

<script> //1. Draw the hollow rectangle (stroke rectangle) ctx.strokeRect(x,y,width,height) //2. Draw a solid rectangle ctx.fillrect (x,y,width,height) // All brush styles must be written before drawing to take effect ！！！！！！！！！ StrokeStyle ="#f00" //4. FillStyle ="#f00" //5. GlobalAlpha: ctx.globalAlpha=0.4 </script>Copy the code

2. Draw text

<script> //1. Draw strokeText ctx.strokeText(text,x,y) //2. Draw the fill (entity) text ctx.fillText(text,x,y) //3. Get/Set text style // Set: ctx.font=" font size "; // Get: ctx.font //4. Get/set the horizontal alignment of text // set: ctx.textalign ="center"; // Get: ctx.textalign //5. Get/set vertical alignment of text (baseline position) // Set: Ctx. textBaseline="top" //alphabetic default, Text baselines are normal alphabetic baselines // Top text baselines are the top of the EM box // Middle text baselines are the middle of the EM box // Ideographic text baselines are ideographic baselines // Bottom text baselines are the bottom of the EM box // Hanging text baselines are hanging baselines TextBaseline // Returns the object ctx.measureText(text).width containing the specified text width; </script>Copy the code

3. Clear all elements in the rectangle

<script> ctx.clearrect (x,y,width,height)Copy the code

4. The path

Ctx.moveto (x,y) ctx.lineto (x,y) ctx.stroke()// Draw the defined path ctx.strokestyle ="color" Draw the path color Ctx.fillstyle ="color" // Fill color </script>Copy the code