최근에는 커스텀 플레이어를 작성하고 있습니다. 글을 쓰기 전에 플레이어의 모든 속성과 방법을 살펴보아야 합니다. 적과 우리 자신을 알아야만 백 번의 전투를 통해 싸울 수 있습니다. 우리가 작성한 플레이어와 우리가 직면한 몇 가지 함정도 업로드하세요.
비디오 태그 인라인 속성더 있어야 하지만 아직 사용하지 않았습니다. MDN 문서를 확인할 수 있습니다.
비디오 객체의 속성 및 메서드1. 오류 상태
$video.error; //null: 정상 $video.error.code; //1. 사용자 종료 2. 네트워크 오류 3. 디코딩 오류 4. 잘못된 URL
2. 네트워크 상태 속성(일부는 더 일반적으로 사용됨)
$video.currentSrc; //현재 리소스의 URL을 반환합니다. $video.src = value; //현재 리소스의 URL을 반환하거나 설정합니다. $video.canPlayType(type) //특정 형식의 리소스를 사용할 수 있는지 여부입니다. 재생됨 $video.networkState ; //0. 이 요소는 초기화되지 않았습니다. 1. 정상이지만 네트워크를 사용하지 않습니다. 2. 데이터를 다운로드하는 중입니다. 3. 리소스를 찾을 수 없습니다. $video.load() //src에 지정된 리소스를 다시 로드합니다. 비디오.버퍼링됨; //버퍼링된 영역으로 돌아가서 $video.buffered.end(0)는 데이터의 마지막 순간을 가져옵니다. $video.preload; //none: 메타데이터를 미리 로드하지 않음: 리소스 정보를 미리 로드합니다.
3. 준비 상태
$video.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA $video.seeking;
4.재생 상태(일반적으로 사용됨)
$video.currentTime = value; //현재 재생 위치, 위치를 변경할 수 있음 $video.duration; //현재 리소스 길이 스트림은 무한을 반환합니다. $video.paused //일시 중지 여부 $video.defaultPlaybackRate = value; //기본값 재생 속도를 설정할 수 있습니다. $video.playbackRate = value; //현재 재생 속도는 $video.seekable 설정 후 즉시 변경됩니다. //탐색 가능한 영역으로 돌아갑니다. //종료할지 여부; $video.autoPlay; //자동 재생 여부 $video.play() //재생 $video.pause();
5.제어
$video.controls;//기본 컨트롤 바가 있는지 여부 $video.volume = value; //볼륨 $video.muted = value; //음소거 비디오 이벤트 메소드(일반적으로 추가됨 *) loadstart //클라이언트가 요청을 시작합니다. data *progress //클라이언트가 데이터 일시 중지를 요청하고 있습니다. //지연된 다운로드 중단 //클라이언트가 다운로드를 적극적으로 종료합니다(오류로 인한 것이 아님), *error //데이터 정지를 요청하는 동안 오류가 발생했습니다. //네트워크 속도가 정지되었습니다. * play //play () 및 자동 재생 트리거 *재생 시작 시 일시 중지 //pause()가 로드된 메타데이터를 트리거합니다. //리소스 길이를 성공적으로 가져왔습니다. *waiting //데이터를 기다리는 중입니다. 오류는 아닙니다. *playing //재생 시작 canplay //재생할 수 있지만 중간에 로딩으로 인해 일시 중지될 수 있습니다. *canplaythrough // 탐색 재생 가능 // 리소스 검색 중 탐색 // 리소스 검색 완료 *timeupdate // 재생 시간 변경 *ended // 재생 종료 ratechange // 재생 속도 변경 Durationchange // 리소스 길이 변경 *volumechange // 볼륨 변경
기본적으로 커스텀 플레이어 코드는 이 API와 속성을 기반으로 작성되므로 나중에 확인할 때 편리합니다....
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.