html5--Audio and video

File Log Address http://blog.csdn.net/q1056843325/article/details/60336226

Audio and video have become more and more popular now
Individual websites to ensure cross-browser compatibility
Still choose to use flash

(source is cut from Youku)

Multimedia label Usage

HTML5 adds audio and video two multimedia tags
Compatibility is good, low version IE does not support
Allows us to insert audio and video controls without using any browser plugin
And it's very simple.

(source code truncated from Bilibili)

Element usage is as follows

• 1<audio src="media/xi-Halcyon.mp3" id="demoAudio">不支持H5-audio</audio>
• 2<video src="media/Animation.mp4" id="demoVideo">不支持H5-video</video>

The contents of the tag are displayed if the browser does not support the label.
Of course, when you use these two elements,
At the very least, add the SRC attribute, which is the URL of the resource

However, each browser has different media formats supported by copyright issues
So you can use the following method

<audio id="demoAudio">    <source src="media/xi-Halcyon.mp3">    <source src="media/xi-Halcyon.ogg"> ... 不支持H5-audio</audio><video id="demoVideo"> <source src="media/Animation.mp4"> <source src="media/Animation.webm"> ... 不支持H5-video</video>

This specifies a different resource format
It also guarantees the compatibility of each browser.

Property

Audio and video tags except src
There are also some public properties

Properties	Description
AutoPlay	After setting this property, the audio/video resource is ready to play immediately after
Controls	When this property is set, the browser playback control control is displayed
Loop	After the property is set, the audio/video cycle starts to play again after the end
Preload	When this property is set, the audio/video loads when the page loads and prepares to play (ignoring the property using AutoPlay)

The first three property names are the same as the property values, and you can add the property names directly
Preload has the following attribute values

• None does not load data
• Metedata loading metadata only (time, bit rate, frame size, etc.)
• Auto browser Loads What it thinks is the right amount of media content

For example, to add a piece of music to your browser
and plays immediately after loading, looping
Using the browser's playback controls

• 1<audio src="media/xi-Halcyon.mp3" id="demoVideo" autoplay controls loop></audio>

Control style different browsers are not the same
Styles may also be updated as the browser version is updated

The video element also has unique properties poster
Property value is the URL of the picture resource
Used to set a placeholder image before the video is played

<video src="media/Animation.mp4" id="demoVideo" width="500" height="400" poster="images/preimg.jpg" controls></video>

• 1

• 1

When you click Play, the video plays properly

Scripted audio and video elements

It's easy to get DOM nodes using JS.

• 1var a = document.getElementById(‘demoAudio‘);
• 2var v = document.getElementById(‘demoVideo‘);

Image constructor similar to image
Audio can also be created in a similar way (video is not possible)
The difference is that the image created by the image is inserted into the document
But audio doesn't need

• 1var a = new Audio(‘song.mp3‘);

You can then add a AutoPlay, loop, and other properties to it
Then add to page

Interface

The interface properties and methods provided by the browser can be used on the obtained DOM node
Common properties, methods are as follows

• CURRENTSRC the URL address of the media data
• Volume Playback Volume
  
  • Between 0~1 (note that the Super range will be error), the default 1 maximum volume
• Muted is muted
  
  • Set true to enter silent mode
• Playbackrate Media playback Speed
  
  • Default 1.0 normal speed, >1 fast forward, <1 slow (negative table playback but no browser to implement this function)
• Defaultplaybackrate Media default playback speed
• CurrentTime Current playback time (unit s)
• Duration Media Duration (unit s)
• Play () playing audio/video
• Pause () pauses audio/video
• Load () Reload audio/video (typically used to modify element properties)

Besides, there are

• Played the time period that has been played
• Buffered the time period that has been buffered
• Seekable the time period that the user can jump

They're all timeranges objects.
Each object has a length property (representing the current time period)
and the start () and End () methods (returns the starting point and end point of the current time period, in units s)
Start () and end () have a numeric parameter that represents the first time period
Determine the current cached content percentage:

• 1var percentLoaded = Math.floor(song.buffered.end(0)/song.duration*100)

The following three Boolean properties represent the status of the media player

• Paused is paused
• is the seeking being transferred to a new play point
• Ended if playback ends and stops

Not all browsers support all codecs for video and audio
Canplaytype () method is used to identify the time to support a certain format of the media resources
Returns a string maybe, probably, or an empty string
Returns maybe if only the MIME type is passed in
Returns probably if both MIME type and codec are passed in (possibility increased)
Just because the media file is just a sound/video container
Really decide whether the file can be played is encoded format

• 1console.log(a.canPlayType(‘audio/mp4‘)); //maybe
• 2 console.log(a.canPlayType(‘audio/mp4;codecs="mp4a.40.2"‘)); //probably

The following status bit properties also understand

• ReadyState Ready State
  
  • 0 = have_nothing-no information about whether the audio/video is ready
  • 1 = have_metadata-metadata about audio/video readiness
  • 2 = have_current_data-data about the current playback position is available, but there is not enough data to play the next frame/ms
  • 3 = have_future_data-Data available for the current and at least the next frame
  • 4 = have_enough_data-enough data available to start playback
• Networkstate Network Status
  
  • 0 = network_empty-Audio/Video not initialized
  • 1 = network_idle-Audio/video is active and the resource is selected, but the network is not used
  • 2 = network_loading-The browser is downloading data
  • 3 = network_no_source-Audio/video source not found
• Error.code Error status
  
  • 1 = media_err_aborted-the retrieval process was aborted by the user
  • 2 = media_err_network-An error occurred at the moment of loading
  • 3 = media_err_decode-Error occurred while decoding
  • 4 = media_err_src_not_supported-Audio/video not supported

Event

In addition to the interface property method
and an essential event model.
If we don't want to use the browser's controls but define our own playback control components
We're going to use this thing.

• triggered when play plays
• Triggered when pause is paused
• Loadedmetadata triggered when the browser has finished acquiring media metadata
• Loadeddata triggered when the browser loads the current frame media data
• Ended trigger when stop after playback is finished

There are many events outside the first
Many not used
Cut a picture in the book

Through interfaces and events
You can also simply implement your own humble music player

• 1<button id="btn">播放</button>
• < Span class= "Hljs-value" >2 <span id= "cur" >0s </span>/<span id=" dur ">0s</ Span><br>
• 3 音量：<input type="range" id="vol">

var audio =New Audio (' Media/xi-halcyon.mp3 ');var btn = document.getElementById (' btn ');var vol = document.getElementById (' vol ');var cur = document.getElementById (' cur ');var dur = document.getElementById (' Dur ');var state =' Pause '; vol.value =100;audio.onloadeddata =function() {dur.textcontent =Math.floor (audio.duration) +' s ';} SetInterval (function() {cur.textcontent = Math.floor (audio.currenttime) + ' s ';}, $ ); Btn.onclick =  function() { if (state = = = ' play ') {state = ' pause '; btn.textcontent = ' play '; Audio.pause ();} else{state = ' play '; btn.textcontent = ' pause '; Audio.play ();}} Vol.oninput = function() {audio.volume = vol.value/;}        

html5--audio and video videos