HTML5 비디오 tag_html5 튜토리얼 기술의 속성, 메소드 및 이벤트에 대한 요약 소개

얼마 전에 html5 비디오를 기반으로 비디오 플레이어를 작성했는데 처음에는 이해가 안 됐는데 나중에는 기본적으로 완전한 커스텀 플레이어를 작성할 수 있었습니다. 이 과정에서 비디오 태그의 속성, 방식, 이벤트에 대한 포괄적인 이해를 얻었습니다. 카테고리는 아래와 같습니다.

코드 복사

코드는 다음과 같습니다 :

src: 동영상 속성
poster: 동영상 표지, 재생 중에 사진이 표시되지 않음
preload: 미리 로드
autoplay: 자동 재생
loop: 반복 재생
컨트롤: 브라우저와 함께 제공되는 컨트롤 막대
너비: 비디오 너비
높이: 비디오 높이

html 코드

코드 복사

코드는 다음과 같습니다.

> // audio와 video 모두 JS를 통해 객체를 얻을 수 있고, JS는 id

를 통해 video와 audio 객체를 얻습니다.

동영상 객체 가져오기

코드 복사코드는 다음과 같습니다.

Media = document.getElementById("media")

미디어 메서드 및 속성: HTMLVideoElement와 HTMLAudioElement는 모두 HTMLMediaElement에서 상속됩니다

코드 복사코드는 다음과 같습니다.

Media.error; //null: 정상
Media.error.code; //1. 사용자 종료 2. 네트워크 오류 3. 디코딩 오류 4. 잘못된 URL
/ /Network Status
- Media.currentSrc; //현재 리소스의 URL을 반환합니다.
- Media.src = value; //현재 리소스의 URL을 반환하거나 설정합니다.
- 미디어 .canPlayType( type); //특정 형식의 리소스를 재생할 수 있는지 여부
- Media.networkState; //0. 이 요소는 초기화되지 않습니다. 1. 정상이지만 네트워크를 사용하지 않습니다. 2. 데이터를 다운로드하는 중입니다. 리소스를 찾을 수 없습니다
- Media.load(); //src에 의해 지정된 리소스를 다시 로드합니다
- Media.buffered; //버퍼링된 영역인 TimeRanges로 돌아갑니다
- Media.preload; 메타데이터를 미리 로드하지 마세요: 리소스를 미리 로드하세요. 정보 자동:

//준비 상태
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; /찾고 있는지

//재생 상태

Media.currentTime = value; //현재 재생 위치, 값을 할당하면 위치가 변경될 수 있습니다
Media.startTime; //스트리밍 미디어이거나 0부터 시작하지 않는 리소스인 경우 일반적으로 0입니다. , 0이 아닙니다.
Media.duration; //현재 리소스 길이 스트림은 무한을 반환합니다.
Media.paused; //일시 중지 여부
Media.defaultPlaybackRate = value; be set
Media.playbackRate = value; //현재 재생 속도, 설정 직후 변경
Media.played; //재생된 영역, TimeRanges를 반환합니다. 이 개체는 아래를 참조하세요
Media. eekable; //찾을 수 있는 영역을 반환합니다. TimeRanges
Media.ended; // 종료 여부
Media.autoPlay; // 자동 재생 여부
Media.loop;
Media.play(); // 재생
Media.pause() //일시 중지
//동영상 제어

Media.controls;//기본 컨트롤 막대가 있는지 여부
Media.volume = value; //Volume
Media.muted = value; //Mute
TimeRanges(영역) 개체
TimeRanges.length; //영역 세그먼트 수
TimeRanges.start(index) //인덱스 세그먼트 영역의 시작 위치
TimeRanges.end(index) //인덱스 세그먼트 영역의 끝 위치
;//관련 이벤트

var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
}, false);
}
eventTester("loadstart"); //클라이언트가 데이터를 요청하기 시작합니다.
eventTester("progress") //클라이언트가 데이터를 요청합니다.
eventTester("일시 중지" ) ; //다운로드 지연
eventTester("abort"); //클라이언트가 다운로드를 적극적으로 종료합니다(오류로 인한 것이 아님)
eventTester("loadstart") //클라이언트가 데이터 요청을 시작합니다
eventTester( "progress"); //클라이언트가 데이터를 요청 중입니다
eventTester("suspens"); //지연된 다운로드
eventTester("abort") //클라이언트가 적극적으로 다운로드를 종료합니다(기한이 아님) 오류),
eventTester("error"); //데이터를 요청할 때 오류가 발생했습니다.
eventTester("stalled") //네트워크 속도가 멈췄습니다.
eventTester("play") / /play() 및 자동 재생 재생 시작 시 트리거됨
eventTester("pause"); //pause() 트리거됨
eventTester("loadedmetadata") //성공적으로 리소스 길이를 가져옴
eventTester("loadeddata" ); //
eventTester("waiting"); //오류가 아닌 데이터를 기다리는 중
eventTester("playing") //재생 시작
eventTester("canplay"); 재생되지만 로딩으로 인해 중단될 수 있음 Pause
eventTester("canplaythrough"); //재생 가능, 모든 노래가 로드됨
eventTester("seeking") //검색 중
eventTester(" eeked"); //검색 완료
eventTester("timeupdate"); //재생 시간 변경
eventTester("ended"); //재생 종료
eventTester("ratechange"); //재생 중 속도 변경
eventTester("durationchange" ); //리소스 길이 변경
eventTester("volumechange") //볼륨 변경