H5 small content (2), h5 content
Audio/Video Processing
Video Processing
Basic Content
Use Flash technology to process video content in HTML pages
Including audio, animation, and web games
Features
Browser native does not support (IE browser requires the installation of ActiveX components)
Poor performance (cannot be used too much)
Smart mobile terminals do not support Flash technology
Fate
Flash parent company Adobe publicly announced giving up
The best alternative to Flash technology-HTML5
Almost all browsers support <video> Elements
Higher Performance
Smart mobile terminals provide excellent support
How to Implement Video Processing
<Video> element
If the current browser does not support <video> Elements
Write the prompt content in the <video> element
Attribute
Src-introduce the video file path
Autoplay-Automatic Video Playback
Use the <source> element
<Video>
<Source src = "A Video Format"/>
<Source src = "A Video Format"/>
<Source src = "A Video Format"/>
</Video>
<Video> supported video formats
MP4 format-currently popular
OGG format-mostly used for mobile terminals
WebM format-currently only supports ultra-HD format
HTML pages support ultra-HD format (HTML5)
Launched by Google
<Video> attributes of an element
Src-introduce the video file path
Autoplay-Automatic Video Playback
Controls-provides control panel
Loop-Indicates loop playback
Poster-set the image displayed before playback
Width and height-set the width and height of the video.
Preload-preload
Auto-(default) auto load
None-do not load
Metadata-only load basic video information (excluding video)
Advanced content
Method
Play ()-play a video
Pause ()-pause a video
Load ()-load video
CanPlayType ()-determines whether the current browser supports the specified video format
Event
Play-triggered when the video is played
Pause-triggered when the video is paused
Ended-triggered when the video ends
Error-triggered when a video error occurs
Canplay-you can play the video as long as the video can be played, regardless of the overall situation.
Canplaythrough-you can play the video as long as the video can be played.
Progress-indicates the video loading progress
Attribute-used to determine
Paused-indicates whether the current video is paused.
Returns a Boolean value. "true" indicates pause, and "false" indicates playback.
Ended-indicates whether the current video has been played.
Returns a Boolean value. true indicates completion.
Duration-indicates the duration of the current video.
CurrentTime-indicates the position where the current video is played
Audio Processing
<Audio> element
First-only one audio format is supported
<Audio src = "audio file path"> </audio>
Second-multiple audio formats are introduced simultaneously
<Audio>
<Source src = "audio format"/>
<Source src = "audio format"/>
<Source src = "audio format"/>
</Audio>
<Audio> the element supports the audio format.
MP3-the most popular
OGG
WAV