HTML5의 필수 오디오 및 비디오 이벤트

html5 오디오 및 비디오 및 브라우저 차이 분석의 주요 이벤트에 대한 자세한 설명

html5의 및 요소는 풍부한 이벤트 메커니즘을 제공합니다. "Play"이벤트와 같은 일부 이벤트는 한 눈에 분명하지만 "Progress"이벤트와 같은 다른 행사는 더 복잡합니다. 이 기사는 가장 중요한 미디어 이벤트 중 일부를 심층적으로 탐색하여 트리거 타이밍, 관련 속성 및 다른 브라우저 간의 차이점을 분석합니다.

코어 포인트 <video></video> <audio></audio>

html5의 및 요소는 다양한 이벤트를 제공하고, 일부는 간단하고 이해하기 쉬우 며 (예 : "플레이"이벤트와 같이) 일부는 더 복잡합니다 (예 : "Progress"이벤트). 플레이 이벤트 (예 : "Play", "Pause", "Ended")는 미디어 재생 또는 일시 정지 작업에 응답하고 해당 미디어 기능 및 속성에 해당합니다. 그러나 일부 브라우저에는 Media Playback이 끝나면 Opera, Safari 및 IE10과 같은 예외가 있습니다. 로딩 이벤트는 "로드 스타트", "진행", "로드 메타 타타", "Canplay"및 "CantlayThrough"이벤트를 포함한 미디어 데이터의로드 또는로드 실패와 관련이 있습니다. 그러나 그들의 동작은 브라우저와

속성에 따라 다릅니다.
• "진행 "이벤트는 다운로드 데이터 중에 지속적으로 트리거되며 시간 범위는 다운로드 진행 상황을 나타내는 데 사용됩니다. 그러나 Opera와 같은 브라우저에는 두 가지 범위가 발생하는 반면 Mobile Safari는 활동 범위 만 유지합니다. <video></video> "TimeUpdate"이벤트는 미디어 재생 중에 지속적으로 트리거되며 다른 요소를 미디어 재생과 동기화하는 데 사용됩니다. 이 이벤트에는 일반적으로 브라우저 오류 나 차이가 없습니다. <audio></audio>
재생 이벤트
• 재생 이벤트 응답 미디어 재생 또는 일시 정지 작업. 이러한 이벤트는 비교적 간단합니다. .paused "재생 "및"일시 정지 "이벤트는 각각 미디어가 재생되거나 일시 중지되면 발사됩니다. "종료 된"이벤트는 정상적인 재생의 끝이든 사용자가 수동으로 점프하는지 여부에 관계없이 미디어 재생이 끝날 때 시작됩니다.
첫 두 이벤트는 및 preload 메소드에 해당합니다. 마지막 두 이벤트는 및
• 속성에 해당합니다.
속성은 기본적으로 미디어가 멈추는 경우 true를 기본으로합니다.
• 그러나 그러나 오페라, 사파리 및 IE10에 대한 예외는 중요합니다. 미디어 재생이 끝나면
플래그는 여전히 거짓입니다 (논리적으로 미디어가 더 이상 재생되지 않기 때문에 사실이어야합니다). 이것은이 경우 간단한 재생/일시 중지 버튼 핸들러가 실패한다는 것을 의미합니다.

이 문제는 "종료 된"이벤트 응답에서

메소드를 수동으로 호출하여 해결할 수 있습니다. Firefox와 Chrome은 내부적으로 "종료 된"이벤트 전에 "일시 중지"이벤트를 트리거 하여이 문제를 해결했습니다. 로딩 이벤트

로딩 이벤트는 미디어 데이터 로딩 (또는로드 실패)과 관련이 있습니다. 이러한 이벤트의 빈도는 매체의 로딩 상태, 즉 속성이 사용되는지 및 미디어가 캐시되었는지 여부에 따라 다릅니다.

모든 경우에 트리거 된 첫 번째 이벤트는 "로드 스타트"이벤트로 브라우저가 데이터를 찾기 시작했음을 나타냅니다. 그러나 이것은 단지 브라우저가보기 시작한다는 것을 의미하며, 모든 데이터가 실제로로드되었거나 미디어 리소스가 존재한다는 것을 의미하지는 않습니다. preload 속성의 값이 "없음"인 경우, "로드 스타트"이벤트는 재생이 시작되기 전에 트리거되는 유일한 이벤트입니다. 속성의 값이 "메타 데이터"또는 "자동"인 경우, 다른 두 가지 이벤트가 곧 "Progress"및 "LoadedMetadata"라는 이벤트가 트리거됩니다. (예압이 없으면이 이벤트는 여전히 발사되지만 재생이 시작될 때까지 기다리십시오.) "진행 "이벤트는 비교적 복잡하며 다음 섹션에서 개별적으로 논의 될 것입니다. "LoadedMetadata"이벤트는 간단합니다. 즉, 브라우저가 미디어의 (기본값 NAN이 아닌 부동 소수점 번호)를 알기에 충분한 메타 데이터를로드했습니다.

물론 returns 404) 미디어는"오류 "이벤트를 생성하고 가능하지 않습니다. 더 연주합니다.

다시 한번, 중요한 브라우저 차이가 발생했습니다. Mobile Safari에서는 설정이 의도적으로 구현되지 않으므로 속성의 모든 값은 preload와 동일합니다. 대조적으로, IE10에서, 미디어 메타 데이터는 항상 기본적으로로드되므로 preload는 와 동일하게 행동합니다.

"진행"이벤트

"진행 "이벤트는 데이터 다운로드 중에 계속 발사됩니다. 따라서 가 "없음"으로 설정되면, 재생이 시작되기 전에는 전혀 트리거되지 않습니다 "Auto", 전체 미디어 파일이 다운로드 될 때까지 계속 발사됩니다. .duration 그러나 모든

설정의 경우 재생이 시작되면 브라우저는로드 할 데이터가 남은 데이터가 없을 때까지 전체 미디어 파일을 계속 다운로드하고 비디오가 일시 중지 된 경우에도 배경 다운로드가 계속됩니다.

데이터 자체는 일련의 시간 범위로 표시되며 "진행"이벤트를 사용하기 전에 이러한 시간 범위가 어떻게 작동하는지 이해하는 것이 중요합니다. src

(다음 내용은 기본적으로 원래 텍스트와 동일하지만 일부 문장은 조정되고 연마되었습니다. 시간 업데이트 이벤트

마지막으로, 미디어 "TimeUpdate"이벤트를 간단히 소개하겠습니다. 미디어 재생 중에 계속 트리거됩니다. 이 이벤트를 사용하여 수동 자막 생성, 전 사체의 활성 라인을 강조하고 여러 미디어 소스를 동기화하는 등 다른 컨텐츠를 미디어 재생과 동기화 할 수 있습니다. preload"TimeUpdate"이벤트의 트리거 주파수는 지정되지 않았으며 실제로 브라우저마다 크게 다릅니다. 그러나 전체 평균 주파수는 초당 약 3-5 배이므로 대부분의 동기화 목적으로 정확합니다.

내가 알 수있는 한,이 경우 브라우저 오류 나 차이가 없습니다.

결론

이 기사에서는 다른 재생 및 점프 이벤트, 고급 네트워크 상태 이벤트, 심지어 볼륨이 변경 될 때 트리거하는 모든 미디어 이벤트를 다루는 것은 아닙니다. 그러나 나는 가장 간단한 비디오 및 오디오 스크립팅 요구를 충족시키기에 충분하고 기본 사용자 정의 인터페이스를 구축하기에 충분한 것으로 생각하는 것을 다루었습니다.

(FAQS 부분은 기본적으로 원래 텍스트와 동일하지만 일부 문장이 조정되고 연마되어 큰 단락의 직접 복사를 피하고 원래 의미를 유지하는 것을 피)

위 내용은 HTML5의 필수 오디오 및 비디오 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!