Shulou(Shulou.com)06/01 Report--

The previous words

HTML5 has added two media-related tags that allow developers to embed cross-browser audio and video content in web pages without relying on any plug-ins. These two tags are and are not supported by IE8- browsers

Take a video file as an example, which contains audio tracks, video tracks, and other metadata (cover, title, subtitle, subtitle, etc.)

HTML element

To use these two elements, at least the src attribute must be included in the tag. Any content between the start and end tags will be used as backup content and displayed if the browser does not support these two media elements

Autoplay automatic playback controls display control loop loop plays preload audio when the page is loaded, and prepares to play (ignore this property if autoplay is used) the URL of the audio to be played by src

[note] element does not support playback of files in wma format

Click the following corresponding attribute values to demonstrate

Autoplay auto playback controls display control height player height width player width loop loop preload video is loaded when the page is loaded And prepare to play (ignore this attribute if using autoplay) preload= "none" / / do not load video preload= "auto" when the page is loaded / / load the entire video preload= "meta" / / when the page is loaded and only load the URLposter image of the video to be played by the metadata URLposter. Or the image displayed before the user clicks the play button

Click the following corresponding attribute values to demonstrate

Provide and provide media resources

Media specifies the type of media resources (no browser support) src specifies the URLtype of media files specifies the MIME type of media resources

Common types

Video [1] video/ogg [2] video/mp4 [3] video/webm

Audio [1] audio/ogg [2] audio/mpeg

Use and at least include the src attribute in the tag. Any content between the start and end tags will be used as backup content and displayed if the browser does not support these two media elements

Video player not available. Audio player not available.

Because not all browsers support all media formats, you can specify multiple different media sources. To do this, instead of specifying the src attribute in the tag, use one or more elements

Video player not available.

Audio player not available.

Because not all browsers support and tag, a better solution is to have alternative content

Elements are used as child elements of media elements-and. It allows you to specify timing subtitles (or event-based data), such as automatic subtitle processing

The type of data that track adds to the media element is set in the kind property, which can be subtitles, captions, descriptions, chapters, or metadata. This element points to the source file that the browser exposes that contains timed text when the user requests additional data. Any two track child elements of a media element cannot have the same kind, srclang, and label attributes

[default]

The default attribute specifies that the track is the default, if no track is selected

[kind]

The kind attribute indicates what text type the track belongs to

Captions brief description the track definition will be displayed in the player chapters the track definition chapter for navigating the media resource descriptions the track definition description, for describing the content of the media through audio, if the content is not playable or invisible metadata the content used by the track definition script subtitles the track definition subtitle for displaying subtitles in video

[label]

The label attribute represents the label or title of the track

[url]

The URL attribute represents the URL of the subtitle file

[srclang]

The srclang attribute represents the language of the track, which is required if the value of the kind property is "subtitles". "zh" in Chinese and "en" in English

The subtitle file is written in the following format. Note that the three zeros of millisecond bits cannot be omitted.

Welcome to the personal website of Little match. WEBVTT100:00:01.000-- > 0000VOUR 08.000

API

HTML5 DOM provides methods, properties, and events for and elements

Method

1. CanPlayType ()

Check whether the browser can play the specified audio or video type, and the return value is one of the following:

Probable': browsers are most likely to support this type. Maybe': browsers may support this type.': browsers do not support this type

/ / Common value video/oggvideo/mp4video/webmaudio/mpegaudio/oggaudio/mp4video/ogg;codecs= "theora,vorbis" video/mp4;codecs= "avc1.4D401E,mp4a.40.2" video/webm;codecs= "vp8.0,vorbis" audio/ogg;codecs= "vorbis" audio/mp4;codecs= "mp4a.40.5"

Var audio = document.getElementById ('audio'); / / probablyconsole.log (audio.canPlayType (' video/ogg;codecs= "theora,vorbis"))

2. Load ()

Reload audio or video elements to update audio or video elements after changing the src source or other settings

Var audio = document.getElementById ('audio'); audio.src =' myocean.mp3'; audio.load ()

3. Play ()

Start playing audio or video

4. Pause ()

Pause the currently played audio or video

Playback pause

Click the following corresponding attribute values to demonstrate

Attribute

[note] of all the attributes, only videoWidth and videoHeight are available immediately, and other attributes are not available until the audio and video metadata is loaded.

[read only]

1 、 buffered

Buffered.length// get the number of buffered ranges buffered.start (index) / / get the start position of a buffered range buffered.end (index) / / get the end position of a buffered range buffered.end (0) / / get the number of seconds currently buffered

Get buffer time var oBtn = document.getElementsByTagName ('button') [0]; oBtn.onclick = function () {alert (audio.buffered.end (0));}

2 、 currentSrc

Returns the URL of the current audio or video

Var audio = document.getElementById ('audio'); / / http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3setInterval(function(){ console.log (audio.currentSrc);}, 1000)

3 、 ended

Returns whether the audio or video has ended

_ document.onclick = function () {console.log (audio.ended);}

4 、 duration

Returns the length of the current audio or video in seconds, or NaN if it is not set

/ / NaNconsole.log (audio.duration); / / 317.022041setTimeout (function () {console.log (audio.duration);}, 1000)

5 、 networkState

Returns the current network status of audio or video

NetworkState:0 (not initialized) networkState:1 (resource selected but not using network) networkState:2 (downloading data) networkState:3 (resource source not found)

/ / 3console.log (audio.networkState) / / 1_document.onclick = function () {console.log (audio.networkState);}

6 、 paused

Returns whether audio or video has suspended IELTS training in the new channel.

Paused:true; (paused) paused:false; (not paused)

Console.log (audio.paused) _ document.onclick = function () {console.log (audio.paused);}

7 、 played

Broadcast range refers to the time range of audio or video. If the user jumps in audio or video, it will get multiple playback ranges.

Played.length (get the number of audio or video playback ranges) played.start (index) (get the start position of a broadcast range) played.end (index) (get the end position of a broadcast range)

[note] the subscript of the broadcast range of the first paragraph is 0

_ document.onclick = function () {console.log (audio.played.end (0));}

8 、 readyState

Returns the current ready state of audio or video

ReadyState:0 (no information about whether audio or video is ready) readyState:1 (metadata about audio or video ready) readyState:2 (data about the current playback position is available, but not enough data to play the next frame) readyState:3 (data for the current and at least the next frame is available) readyState:4 (enough data available to start playback)

/ / 0console.log (audio.readyState); / / 4_document.onclick = function () {console.log (audio.readyState);}

9 、 seekable

Returns the addressable range, which is the time range in which the user can address (move the playback position) in video or audio. For streaming video, it is usually possible to address anywhere in the video, even if it has not yet been buffered

Seekable.length (get the number of addressable ranges in audio or video) seekable.start (index) (get the start of the addressable range) seekable.end (index) (get the end of the addressable range)

_ document.onclick = function () {console.log (audio.seekable.end (0));}

10 、 seeking

Seeking:true (user is addressing) seeking:false (user is not addressing)

Audio.onseeking = function () {console.log (audio.seeking);}

[readable]

1 、 autoplay

Autoplay:false (default, no auto play) autoplay:true (auto play)

2 、 controls

Controls:false (default, do not display controls) controls:true (display controls)

3 、 crossOrigin

Sets or returns CORS settings

4 、 currentTime

Sets or returns the current position of audio or video (in seconds)

Var audio = document.getElementById ('audio'); _ document.onclick = function () {console.log (audio.currentTime); audio.currentTime = 5; console.log (audio.currentTime);}

5. DefaultMuted (only supported by chrome)

DefaultMuted:true (initial mute) defaultMuted:false (default, initial unmute) audio.defaultMuted = true

6 、 muted

Muted:true (mute) muted:false (not mute) = 0.1) audio.volume-=0.1; "> reduce the volume

Event

When audio or video is being loaded, the following events occur in turn:

Loadstart: prompt browser to start looking for specified audio or video progress: prompt browser to download specified audio or video durationchange: prompt audio or video duration has changed loadedmetadata: prompt audio or video metadata loaded loadeddata: prompt audio or video current frame loaded But there is not enough data to play the next frame canplay: prompt browser to start playing specified audio or video canplaythrough: prompt audio or video to play progress non-stop: prompt browser to download specified audio or video

Audio.onloadstart = function () {console.log ('loadstart');} audio.ondurationchange = function () {console.log (' durationchange');} audio.onloadedmetadata = function () {console.log ('loadedmetadata');} audio.onloadeddata = function () {console.log (' loadeddata');} audio.onprogress = function () {console.log ('progress');} audio.oncanplay = function () {console.log (' canplay') } audio.oncanplaythrough = function () {console.log ('canplaythrough');}

There are several events that affect the loading of audio or video data:

Abort: trigger error when audio or video terminates loading: trigger stalled when audio or video loading error occurs: trigger suspend when the browser attempts to obtain media data but the data is not available: trigger when audio or video data is blocked from loading (it can be triggered after completing loading, or because it is paused)

Empted: triggered when a failure occurs and the file is suddenly unavailable

SetTimeout (function () {video.src='';}, 2000); video.onabort = function () {console.log ('abort');} video.onerror = function () {console.log (' error');} video.onstalled = function () {console.log ('stalled');} video.onsuspend = function () {console.log (' suspend');} video.onemptied = function () {console.log ('emptied');}

The following events are triggered when the audio or video control button changes:

Play: audio or video file is ready to trigger playing when playing starts: trigger ended when audio or video file playback is finished; trigger pause when audio or video file playback is finished; trigger ratechange when audio or video file pauses: change playback speed into trigger seeked: trigger seeking when positioning is over: trigger timeupdate when indicating positioning: trigger when playback position changes [Note: playback] ] volumechange: triggered when the volume changes. Waiting: triggered when the next frame needs to be buffered and stopped.

Var I = 1 role document.onclick = function () {ifold documentation 0.1; audio.playbackRate = I;} audio.onended = function () {console.log ('ended');} audio.onpause = function () {console.log (' pause');} audio.onplay = function () {console.log ('play');} audio.onplaying = function () {console.log (' playing') } audio.onratechange = function () {console.log ('ratechange');} audio.onseeked = function () {console.log (' seeked');} audio.onseeking = function () {console.log ('seeking');} audio.ontimeupdate = function () {console.log (' timeupdate');} audio.onvolumechange = function () {console.log ('volumechange');} audio.onwaiting = function () {console.log (' waiting') }

Audio proprietary

The element is in a native javascript constructor, Audio, which can play audio at any time. Audio is very similar to Image, but Audio does not have to be inserted into a document like Image, just create a new instance and pass in the audio source file

Var audio = new Audio ('test.mp3')

Var audio = new Audio ('http://7xpdkf.com1.z0.glb.clouddn.com/honey.mp3');audio.oncanplaythrough = function () {audio.controls = true; document.body.appendChild (audio);}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.