오디오 및 비디오 재생 비디오 오디오

오디오 및 비디오 재생 (비디오, 오디오) 및 일반 구덩이 처리

소개 배경

HTML5는 웹 페이지, 오디오 및 주로 플래시를 통해 비디오 액세스, 액티브 X 플러그인뿐만 아니라 마이크로 소프트의 실버 나중에 플래시가 세계를 휩쓸고 있지만, 인터넷의 지속적인 개발과 함께, 모바일 시대, 플래시의를 입력 한 후했지만, 보여 도입을 표시하기 전에 또한 비교적 큰 등, 플래시는 본질적으로 PC가 태어난입니다,없는 적응하기 위해 소비하는 플래시는 종종 취약점, 보안 문제, 성능 저하 및 웹 브라우징 배터리 장치를 부러 때문에 HTML5 각광 점차 주로 교체 주요 제조 업체가 점차 포기 있도록 기능 모바일 시대는, 심지어 어도비 자체가 플래시를 포기했다. 그래서 HTML5의 주요 웹 멀티미디어의 미래 방향입니다.

오디오 포맷
　　형식의 정의에서 암웨이에 :

오그 : 새로운 오디오 압축 포맷은, 개방, 완전 무료입니다 없으며 특허 제한.

MP3는 : 오디오 압축 기술입니다. 크게 오디오 데이터의 양을 줄일 수 있도록 설계되었습니다.

WAV : 마이크로 소프트는 사운드 파일 포맷을 개발하고, CD 품질의 사운드 파일은 거의 동일합니다.

오페라, 크롬 및 세 가지 모드에 대한 파이어 폭스 지원, 마이크로 소프트와 애플의 MP3 형식이 자신의 특허 이익에 대한 애착, 오픈 소스 잠재적 인 경쟁자가 차단 된 상태 OGG있는 동안, (MPEG에 대한 주문에는 OGG 오디오는 MP3) 형식은 오디오 및 비디오 기술을 개발하지만, 아무도 아직 소송이없는 이유 공식적인 회사가 있기 때문에 특허 소송 사업 추진 OGG, OGG 이성의 위험 직접 OGG를 사용하여 감히이 있기 때문에 자신의 관계는 더 미묘하다 더 큰 물고기 미끼, 가치가없는 소송이 없기 때문에,하지만, 차례 차례로, 소송이 실패하면, OGG 아무도 사용하지 그 이후, MPEG를 침해 MPEG을 증명하지 않습니다.

오디오 표준 API

SRC : 오디오의 URL을 재생할 수 있습니다.
미리로드 : "자동 재생"이,이 특성이 무시되는 경우 여부, 사전로드.
자동 재생 : 자동으로 재생할지 여부를 지정합니다.
루프 : 루프 여부.
제어 : 같은 재생 버튼으로 컨트롤 바, 함께 제공되는 브라우저를 표시할지 여부.

브라우저가 오디오 재생을 지원하지 않습니다

객체 // JS 돔 받기
VAR = audio_test 새로운 새로운 오디오 ( "는 test.mp3을");
var에 audio_test = document.getElementById를 ( "audio_test");
DOM을 객체 방법 :

canPlayType(type);能否播放某个资源文件，返回三个字符串之一：empty、maybe 或 probably
load();重新加载资源
pay();播放
pause();暂停

DOM 개체 속성, 그냥보다가 여기에 몇 가지 중요한 특성을 보여줄 수 있습니다 :

Media.currentSrc이; // URL의 현재 자원 반환
Media.src = 값; // 현재 자원 설정 또는 URL 반환
Media.currentTime = 값; // 현재 재생 위치를 위치 변경 될 수 있습니다 할당
Media.volume = 값; / / 볼륨
Media.muted = 값; // 음소거
3. 오디오 실제로 구덩이

오디오 라벨 API는 매우 간단하지만, 그것은 단지 PC의 브라우저가 더 나은 지원하지만 때문에 교통 문제의 다양한 모바일 최종 구덩이가있다.

(1) 자동 실행

교통 문제, 사파리 사용자가 트래픽 문제를 일으킬 수있는 오디오 파일을 다운로드 할 생각 확인합니다, 그래서 IOS, 안드로이드의 높은 버전 (5.0)에 추가하여이 기능을 사용하지 않으 또한 기계의 일부이기 때문에 IOS 사파리 이유의 공식 설명에 따르면, 자동 재생 속성을 무시하는 것입니다 이 문제의 존재, 일부 처리를 수행해야이 기능을 우회시키기 위해 :

이 솔루션은 사용자가 버튼을 클릭하면, 페이지에 버튼을 추가 음악을 재생하는 것입니다

( 'touchstart'기능 ON $ ( '#의 myBtn') () {.
VAR 오디오 = $ ( '# 오디오') [0]
audio.load ();
audio.pause ();
audio.play ();
})
　　 (2) 싱글 질문 : 때문에 교통 문제로 추정되고, iOS의 사파리 오디오 객체는 여러 오디오를로드 할 때 여러 오디오 파일을 재생할 수 없음을 의미 싱글이며, 후자는 이전을 덮어 씁니다 , 솔루션 아이디어는 CSS의 원리를 보여주는 Sprite와 비슷한 위치를 설정하여 다양한 음악 사운드를 재생하기 위해로드 한 후 하나 개의 파일로 두 개의 오디오 파일을 병합하는 것입니다있다.

var audio= $('#audio')[0],
audioConfig= {
    sound1: {//第一个声音
        start: 0,
        length: 1
    },
    sound2: {//第二个声音
        start: 1.5,
        length: 2
    }
}

사운드 1 플레이 //

audio.currentTime = audioConfig.sound1.start;
audio.play ();

VAR stopFunc = 함수 () {
경우 (this.currentTime> = audioConfig.sound1.start + audioConfig.sound1.length) {
this.pause ()
}
}

audio.addEventListener ( 'timeupdate'stopFunc 거짓);

사운드를 재생 // 2

audio.currentTime = audioConfig.sound2.start;
audio.play ();

VAR의 stopFunc2 = 함수 () {
경우 (this.currentTime> = audioConfig.sound2.start + audioConfig.sound2.length) {
this.pause ()
}
}

audio.addEventListener ( 'timeupdate'stopFunc2 거짓);

(3) 루프

일부 모델 (IOS) 루프 실패, 솔루션, 모니터 재생 완료 이벤트, 수동으로 재생 트리거 방식

<! DOCTYPE html로>

Looping Audio

비디오 포맷

형식에 해당하는 비디오 포맷 세 종류가 있습니다 :

 1、Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件；
 2、MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件；
 3、WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件。

격식 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

비디오 표준 API

SRC : 비디오 속성
포스터 : 비디오 표지 이미지가 재생되지 않는 표시되게
예압 : 예압
자동 재생 : 자동 재생
루프 : 루프
제어 : 내장 된 브라우저 컨트롤 바
폭 : 비디오의 폭
신장 비디오 높이

Media.canPlayType (유형) 자원의 형태 재생할 수 있는지 여부 //
// 재 장전 SRC 지정된 자원, Media.load ()를

Media.play (); // 재생

Media.pause (); // 일시 중지

구덩이 비디오

(1) 자동 재생, 유사한 오디오 태그, 비디오도 비슷한 작업을 필요로

(2) 비디오 플레이어, 컨버전스가 DOM의 src 속성의 방법이 제공되고, 그 후 제 1 영상 마감재, src 속성 세트는 다음과 같은 재생 여러 재생할 때, 달성 currentTime을 방법을 제공 사용될 수도있다 비디오는하지만, 단점은 새로운 비디오 버퍼 시간을로드 할 필요가 있다는 것입니다.

(3) 루프 태그는 이벤트에 의해 처리되는 오디오 비슷

(4) 성공적으로로드 감지 할 수없는 안드로이드에서 지원되지 않습니다 예압 IOS를 속성 미리로드, 일반적인 연습 방법을 중단 바로 다음 비디오를 재생하는 것입니다

비디오 컨텐트가 N 번째 프레임 재생을 시작합니다
여기에 그림 삽입 설명

오디오 및 비디오 재생 비디오 오디오

추천