New H5 features: video and audio usage, new h5 features

New H5 features: video and audio usage, new h5 features

 

HTML5 DOM provides methods, attributes, and events for <audio> and <video> elements.

These methods, attributes, and events allow you to use JavaScript to operate on <audio> and <video> elements.

· First, let's familiarize ourselves with the video tag attribute method and make a demo Based on the attribute method,

• HTML5Supported video formats:

  • Ogg 
    • WithTheoraVideo Encoding +VorbisAudio encodedOggFile
    • Supported browsers:F,C,O
  • MEPG4 
    • WithH.264Video Encoding +AACAudio encodedMPEG4File
    • Supported browsers:S,C
  • WebM 
    • WithVP8Video Encoding +VorbisAudio encodedWebMFormat
    • Supported browsers:I,F,C,O
    • Disadvantage: few videos, few transcoders, and poor Transcoding

• WantvideoThe size of the slow parent div can be automatically filled.videoAdd tagsstyle="width= 100%; height=100%; object-fit: fill"You can.

• Specifies a video format. If the video cannot be played, a prompt is displayed.
• <Video id = "media" src = "examp.mp4" width = "500" poster = "examp1.jpg"> your browser does not support video </video>

The browser determines which video format to play based on its support.

Note: MultiplesourceTag. the browser starts to recognize the first one. If the first one is not recognized, the browser continues to recognize the second one. If the first one is recognized successfully, the first video format is played directly.

<Video controls = "controls"> <source src000000001.mp4 "type =" video/mp4 "/> // write the src attribute to the source tag and specify the video type, for example, the MP4 format is "type =" video/mp4 "<source src = 20.2.ogg" type = "video/ogg"/> // The ogg format <source src = "3. webm "type =" video/webm "/> // webm format </video>

Whether to display the playback control of controls.
Autoplay is automatically played after the browser is opened
Width: Set the player width.
Height: sets the player height.
Loop sets whether the video is played cyclically.
Preload sets whether to play after loading
Src url: Specifies the url of the video to be played.
Poster imgurl is used to set the default picture display for the player.

 

CanPlayType () checks whether the browser can play the specified audio/video type.
Play () starts playing audio/video.
Pause () pause the currently played audio/video.

Set playbackRate or return the playback speed of the audio/video.
CurrentTime sets or returns the current playback position (in seconds) in the audio/video ).
Duration returns the length (in seconds) of the current audio/video ).
Loadedmetadata: When the metadata of the specified audio/video has been loaded, the loadedmetadata event occurs.
Timeupdate: triggered when the time changes

 

Muted sets or returns whether the audio/video is muted.
Volume sets or returns the volume of audio/video

<! DOCTYPE html>