HTML5 Audio and video playback (video,audio) and common pit handling

1. Preface background

Before the advent of HTML5, Web page access to audio and video mainly through the Flash,activex plug-ins, as well as Microsoft later launched Silverlight to show, although Flash once swept the world, but with the continuous development of the Internet, into the mobile era, Flash Thunder gradually replaced by HTML5, the main reason is that flash often burst loopholes, security concerns, poor performance, the network browsing and equipment battery consumption is larger, etc., Flash is born for the PC, can not adapt to the characteristics of the mobile era, so the major manufacturers gradually abandoned, Even adobe itself has given up on flash. So HTML5 is the main direction of future Web multimedia.

2. Audio format

HTML5 Audio supports the following formats: Wav,mp3 and OGG format, first look at the support of the major browsers

Browser	MP3	Wav	Ogg
Internet Explorer +	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera	YES	YES	YES

First of all, Amway format definition:

Ogg: A new audio compression format that is completely free, open and without patent restrictions.

MP3: is an audio compression technology. It is designed to drastically reduce the amount of audio data.

WAV: A sound file format developed for Microsoft, with a sound file quality similar to that of a CD.

Opera,chrome and Firefox support three modes, while Microsoft and Apple have a monopoly on their proprietary MP3 format, while the potential competitor's Ogg is blocked, and Ogg is a kind of audio and video technology designed to counter the MPEG (audio is MP3) format developed , but his relationship is more subtle, because there is no formal company dares to use Ogg directly, because the business promotion OGG exists patent litigation risk, the reason why there is no person litigation Ogg, is because there is no big fish bait, not worth the lawsuit, but in turn once the lawsuit fails, OGG is proven not infringing MPEG , no one has used MPEG since then.

3. Audio Standard API

• src: The URL of the audio to play.
• preload: Whether to preload, if you use "autoplay", this property is ignored.
• autoplay: whether to play automatically.
• loop: Whether the loop plays.
• controls: Shows whether the browser comes with a control bar, such as a play button.

<AudioControls>    <Sourcesrc= "Test.ogg"type= "Audio/ogg">    <Sourcesrc= "Test.mp3"type= "Audio/mpeg">    <Sourcesrc= "Test.wav"type= "Audio/wav">your browser does not support audio playback</Audio>

// JS get Dom Object var New Audio ("Test.mp3");  audio_test = document.getElementById ("Audio_test");

Dom Object methods:

Canplaytype (type); can play a resource file, return one of three strings: empty, maybe, or probably
Load (); Reload Resources
Pay (); play
Pause ();

Dom object properties, because more than just a few important attributes are shown here:

1. MEDIA.CURRENTSRC; Returns the URL of the current resource
2. MEDIA.SRC = value; Returns or sets the URL of the current resource
3. Media.currenttime = value; Current playback position, assignment can change position
4. Media.volume = value; Volume
5. media.muted = value; Mute

3. Audio actually pits

Audio Tag API is very simple, but only the PC browser support is better, mobile is due to traffic problems there are various pits.

(1) Auto play

iOS Safari ignores the AutoPlay attribute, which is officially explained because of traffic problems, Safari believes that not allowing users to confirm the download of audio files will cause traffic problems, so prohibit this feature, in addition to iOS, high version of the Android (5.0) part of the machine also has this problem, Some processing must be done to circumvent this function:

The solution is to add a button on the page to play the music when the user taps the button

$ (' #myBtn '). On (' Touchstart ',function() {     var audio = $ (' #audio ') [0
    Audio.load ();    Audio.pause ();     Audio.play (); })

(2) Singleton problem: estimated also because of traffic problems, IOS Safari Audio object is a singleton, that is, you can not play multiple audio files, when you load multiple audio, the latter will overwrite the previous one, there is a solution to the idea is to combine two audio files into a file, After loading, play different music by setting the position of the sound, similar to the sprite chart principle in CSS.

    var audio= $ (' #audio ') [0],    audioconfig= {        sound1: {//First sound             0,             1        },        Sound2: {//second            sound 1.5,            2        }    }

Play sound 1

Audio.currenttime = AudioConfig.sound1.start;

Audio.play (); var stopfunc= function () {    if (this.currenttime >= AudioConfig.sound1.start + AudioConfig.sound1.length) {        this.pause ()    }}audio.addeventlistener (' timeupdate ', Stopfunc, false);

Play Sound 2

Audio.currenttime = Audioconfig.sound2.start;audio.play (); var stopFunc2 = function () {    if (this.currenttime >= AudioConfig.sound2.start + audioConfig.sound2.length) {        this.pause ()    }}audio.addeventlistener (' Timeupdate ', STOPFUNC2, false);

(3) Loop playback

Some models (iOS) loop playback fails, workaround, listen for playback completion events, manually trigger playback

<!doctype html>function  init () {            var myaudio = document.getElementById (" Audio ");            Myaudio.addeventlistener (false);        }         function Loopaudio () {            var myaudio = document.getElementById ("audio");            Myaudio.play ();        }     </script>
5. Video format
There are 3 formats for video formats:
1. ogg = Ogg file with Theora video encoding and Vorbis audio encoding; 2, MPEG4 = MPEG 4 file with H. 3 video encoding and AAC audio encoding, and WebM = VP8 video encoding The WEBM file for the frequency encoding.
 
 
 
  
  
 
   
 
    
format
 
    
IE
 
    
Firefox
 
    
Opera
 
    
Chrome
 
    
Safari
 
   
 
   
 
    
Ogg
 
    
No
 
    
3.5+
 
    
10.5+
 
    
5.0+
 
    
No
 
   
 
   
 
    
MPEG 4
 
    
9.0+
 
    
No
 
    
No
 
    
5.0+
 
    
3.0+
 
   
 
   
 
    
WebM
 
    
No
 
    
4.0+
 
    
10.6+
 
    
6.0+
 
    
No

 
   
 
  
 
 
 
6. Video Standard API
SRC: Video's properties poster: Video cover, no picture displayed when playing preload: preloaded AutoPlay: AutoPlay loop: Loop Play controls: Browser's own control bar width: Video width height: video altitude
Media.canplaytype (type); Whether you can play a resource in a certain format
Media.load (); Reload the resource specified by SRC
Media.play (); Play
Media.pause (); Time out
7. Pits in video
(1) Auto play, similar to audio tag, video also need to do similar operation
(2) Multi-video playback, the same is to use convergence, set CurrentTime method to achieve, there is a way to set the SRC attribute of the DOM, and then the first video playback, set the SRC attribute and play can also play multiple video, but the disadvantage is that the new video needs to load , buffer time.
(3) Looping like audio tags is also handled by events
(4) Preload, preload properties under iOS is not supported, Android can not detect whether the load is successful, so the general practice is to play the video and then immediately pause
HTML5 Audio and video playback (video,audio) and common pit handling