Audio and video playback (Video, Audio) and common pit processing
- Introduction Background
Before HTML5 appears, Web pages, audio and video access mainly through Flash, Activex plug-ins, as well as Microsoft silverlight later introduced to show, although FLASH has swept the world, but with the continuous development of the Internet, after entering the mobile era, Flash's HTML5 limelight gradually replaced mainly because Flash is often broke vulnerabilities, security concern, poor performance, and web browsing battery devices also consume relatively large, and so on, Flash is inherently for the PC was born, unable to adapt features mobile era, so the major manufacturers gradually abandoned, even Adobe themselves have given up on Flash. So HTML5 is the future direction of the main Web multimedia.
-
Audio formats
to Amway at the definition of the format:Ogg: a new audio compression format, is completely free, open, and no patent restrictions.
MP3: is an audio compression technology. It is designed to greatly reduce the amount of audio data.
WAV: Microsoft Corporation developed a sound file format, and CD quality sound files is almost the same.
opera, chrome and firefox support for three modes, while Microsoft and Apple mp3 format has a soft spot for their patent interests, while the open-source potential competitors were blocked ogg, ogg an order against mpeg ( audio is mp3) format developed an audio and video technology, but his relationships are more subtle, because there is no official company dared to directly use ogg, because of the risk of patent litigation business promotion ogg, ogg reason why no one has yet lawsuit , because there is no big fish bait, not worth the litigation, but in turn, once litigation fails, ogg does not prove infringement mpeg, mpeg later that no one uses.
- audio standard API
src: URL of the audio to be played.
preload: whether pre-loaded, if "autoplay", this attribute is ignored.
autoplay: whether to automatically play.
loop: whether the loop.
controls: whether to display the browser that comes with control bar, such as a play button.
Your browser does not support audio playback
Get the object // js Dom
var = audio_test new new Audio ( "a test.mp3");
var audio_test = document.getElementById ( "audio_test");
the DOM object method:
canPlayType(type);能否播放某个资源文件，返回三个字符串之一：empty、maybe 或 probably
load();重新加载资源
pay();播放
pause();暂停
DOM object properties, it is more than just show here a few important attributes:
Media.currentSrc; // returns the current resource of the URL
Media.src = value; // returns the current resource setting or the URL
Media.currentTime = value; // current playback position, the assignment may change position
Media.volume = value; / / volume
Media.muted = value; // mute
3. audio actually pit
Audio label API is very simple, but it only supports PC browser is better, but there are various mobile end pit because of traffic problems.
(1) Autoplay
ios Safari will ignore the autoplay attribute, according to the official description of the reasons is because the traffic problem, Safari will confirm think let users download audio files can cause traffic problems, so disable this feature, in addition to ios, high version of Android (5.0) are also part of the machine the existence of this problem, in order to bypass this function must do some processing:
The solution is to add a button on a page, play music when the user clicks the button
$ ( '# myBtn') ON ( 'touchstart', function () {.
var Audio = $ ( '# Audio') [0];
audio.load ();
audio.pause ();
audio.play ();
})
(2) singleton question: is estimated because of traffic issues, iOS Safari audio object is a singleton, which means you can not play multiple audio files when you load multiple audio, the latter overwrites the previous one , there is a solution idea is to merge two audio files into one file after loading to play different musical sound by setting the position, similar to Sprite showing the principle of the CSS.
var audio= $('#audio')[0],
audioConfig= {
sound1: {//第一个声音
start: 0,
length: 1
},
sound2: {//第二个声音
start: 1.5,
length: 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 the 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
Some models (ios) loop failure, the solution, the monitor playback completion event, triggered manually play
<!doctype html>
- Video Format
There are three kinds of video formats corresponding to the format:
1、Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件；
2、MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件；
3、WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件。
Prestigious Opera Chrome Firefox IE Safari
Ogg No 3.5Tasu 10.5Tasu 5.0Tasu No
MPEG 4 9.0Tasu No No 5.0Tasu 3.0Tasu
WebM No 4.0Tasu 10.6Tasu 6.0Tasu No
- video standard API
src: properties of the video
poster: video cover image to display when not being played
preload: preload
autoplay: Autoplay
loop: Loop
controls: built-in browser control bar
width: video width
height: video height
Media.canPlayType (type); // whether resources can play some form of
Media.load (); // reload src specified resource
Media.play (); // Play
Media.pause (); // Pause
- video in the pit
(1) Auto Play, similar audio tag, video also requires similar operation
(2) a video player, convergence is also to be used, provided currenttime methods to achieve, there is provided a method of dom src attribute, and then when the first video finishes, the src attribute set can then play also play multiple video, but the disadvantage is that you need to load a new video buffer time.
(3) Loop tag is similar to Audio is handled by event
(4) preloaded under preload attribute ios is not supported under the android can not be detected is loaded successfully, the common practice is to play the video then immediately suspend method
Video content begins playing N-th frame
