이 공유는 HTML5 레이블을 기반으로하는 사용자 정의 비디오 플레이어입니다. 그중에서도 일시 정지 재생, 진행률 드래그, 볼륨 제어 및 전체 화면과 같은 기능이 구현됩니다.
시사소스 코드 창고를 보려면 저를 클릭하십시오.
핵심 아이디어맞춤형 플레이어를 만드는 데 노출되지 않은 일부 어린이 신발은 레이블을 위해 여기에 머물게 될 것이라고 생각합니다.
<video controls = controls autoplay = autoplay> <소스 src = movie.ogg type = video/ogg/> </video>
Controls 속성은 인터페이스에 브라우저의 자체 컨트롤 막대를 표시하도록 설정되었습니다. UI에 대한 수요가없는 경우, 제작 된 컨트롤러는 이미 대부분의 요구를 충족시킬 수 있습니다. 물론 그렇다면이 공유를 볼 수 없습니다. =
제어 막대를 숨기고 시뮬레이션하십시오그런 다음 사용자 지정 기능을 구현하는 핵심은 아래의 동일한 위치를 사용하여 HTML 및 CSS를 통해 필요한 스타일을 시뮬레이션하는 데 사용됩니다 미국뿐만 아니라 해당 시뮬레이션 UI 및 사용자의 작동 동작의 비디오 재생 데이터.
몇 가지 핵심 함수 및 속성의 사용myvid = getElementById (video1); .duration // 비디오의 총 길이를 반환 // 시뮬레이션 비디오 볼륨 myvid.volume // Volume // 비디오를 얻은 후 myvid로로드에서 전환 될 때 결정됩니다. 오디오 정보/비디오가 준비되어 있는지 // 1 = have_metadata- 메타 데이터의 오디오/비디오에 대해 // 2 = hase_current_data -data 현재 재생 위치에 대한 정보를 사용할 수 있지만 다음 프레임/밀리 초를 재생하기에 충분한 데이터는 없습니다. // 3 = hAd_future_data- 현재와 최소한 데이터의 다음 프레임을 사용할 수 있습니다 // 4 = has_enough_data -available 데이터는 재생을 시작하기에 충분합니다.
구현의 모든 핵심 지점에서, 더 지루할수록 진행률 표시 줄의 시뮬레이션이 더 지루합니다. 그중에서도 비디오 레이블의 현재 시간 및 지속 시간 속성은 현재 재생 시간과 총 재생 시간을 통한 전체 길이에 비해 진행률 막대의 위치를 계산하는 데 사용됩니다. 동시에, 사용자의 최종 설정에서 사용자의 길이를 사용하여 현재 비디오의 위치를 되돌릴 수도 있습니다.
코드 아이디어를 드래그하십시오 // 코어 코드 샘플 var dragdis = 0var proceswidth = xxx // Dragging Bar의 총 길이 ( 'body')는 Dragtarget.css의 왼쪽의 왼쪽의 거리를 드래그 스트립입니다. 동일한 위치에서 렌더링 videoSource.Pause ()}). (왼쪽 = 0} dragtarget.css ({왼쪽}) dragprocess.css ({width : left}). processwidth * duration // 드래그 후 비디오의 올바른 재생 위치 계산볼륨의 제어는 기본적으로 위의 동작과 동일합니다. 따라서 소스 코드에서 저자는 다양한 요소를 통해 볼륨 및 진행 섹션을 판단하여 진행 상황을 수행하거나 볼륨의 제어를 드래그합니다.
비디오 스트리밍 상태를 쿼리하여 재생하기 전에 애니메이션로드 제어 function ifstate () {var state = videoSource.readystate if (state === 4) {// 状态为 4 即可播放 videoplayer ()} else {$ ( '. play-sym-wrapper'). remove () $ ( 'body'). Fstate, 10)}} settimeout (ifstate, 10)핵심 제어 부분이 완료되었습니다. 관심있는 학생들은 소스 코드 HTML을 클릭 할 수 있습니다. 전체 비디오 플레이어의 기본 기능이 실현됩니다.
위는이 기사의 모든 내용입니다.