HTML 5 video 태그 재생 제어

9194 단어 H5video
전환 하 다http://www.php.cn/html5-tutorial-402832.html
이 글 은 주로 HTML 5 video 태그 의 재생 통 제 를 소개 했다.본 고 는 영화 의 전체 시간,재생,일시 정지,영화 의 재생 시간 과 재생 점 설정,볼 륨 의 획득 과 설정 등 내용 을 설명 하고 필요 한 친 구 는 참고 할 수 있다.
 
지난 편 에 서 는 html 5 태그 video(플레이어)를 초기 화하 기 위해 해 야 할 일 들 을 소개 했다.html 5 플레이 어 를 어떻게 간단하게 사용 하 는 지,본 고 는 JS 로 video 라벨 을 어떻게 조작 하 는 지,즉 video 에 대해 간단 하고 기본 적 인 조작 을 하 는 지 에 중심 을 두 었 다.이 는 재생 기의 재생,일시 정지,음량 의 읽 기,설정 등 쓰기 와 관련 된 조작 을 포함한다.플레이어 의 확장 을 시작 합 니 다.
본문 목록:
1.영화 의 전체 시간 가 져 오기 2.재생,일시 정지 3.영화 의 재생 시간 과 재생 점 설정 가 져 오기 4.볼 륨 가 져 오기 와 설정
첫째,영화 의 총 시간 획득
플레이어(video)조작 에 대해 먼저 영화 의 일부 정 보 를 얻어 야 한다.그 중 하 나 는 전체 시간 이다.내용 을 제외 하고 전체 시간 도 가장 먼저 표시 해 야 한다 고 생각한다.비디오 를 조작 하기 전에 비디오 태그 에 ID 를 추가 하면 비디오 요 소 를 쉽게 얻 을 수 있 습 니 다.
1 2 3 4 < video id = "myVideo" controls preload = "auto" width = 300 height = "165"       poster = "http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"       src = "http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4" >      video >
ID 를 설정 하면 작업 을 시작 할 수 있 습 니 다.전체 시간 을 가 져 오 려 면 video 의 이벤트-loaded metadata 를 사용 해 야 합 니 다.이 이벤트 의 트리거 는 메타 데이터(미디어 의 기본 정보)가 불 러 왔 음 을 표시 합 니 다.addEventListener 로 이 벤트 를 감청 합 니 다.
1 2 3 4 5 6 7 8 9 10 11 var myVideo = document.getElementById('myVideo');// video myVideo.addEventListener("loadedmetadata", function(){      // });       , , , -duration var myVideo = document.getElementById('myVideo')// video      ,tol = 0 ; myVideo.addEventListener("loadedmetadata", function(){      tol = myVideo.duration;// });
주의해 야 할 것 은 총 시간 단위 가 초 이 고 표시 할 때 필요 에 따라 전환 하 는 것 입 니 다.
둘째,재생,일시 정지
플레이어 에 있어 서 가장 기본 적 인 기능 은 재생 과 일시 정지 입 니 다.전체 시간 을 가 져 온 후에 다음 작업 은 재생 과 일시 정지 입 니 다.이 럴 때 비디오 를 쓰 는 두 가지 방법 이 플레이 와 pause 입 니 다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 var myVideo = document.getElementById('myVideo')// video      ,tol = 0 ; myVideo.addEventListener("loadedmetadata", function(){    tol = myVideo.duration;//   }); p > < p > //   function play(){       myVideo.play();   } p > < p > //   function pause(){       myVideo.pause();   }
주의해 야 할 것 은 재생 이 끝 난 후에 플레이 방법 을 실행 하면 처음부터 재생 된다 는 것 이다.
셋째,영화 의 재생 시간 과 재생 점 설정
플레이어 가 재생 되 고 멈 추 면 그 다음 에 봐 야 할 것 은 영화 가 얼마나 재생 되 었 는 지,어느 시간 까지 재생 되 었 는 지 하 는 것 이다.이 동작 은 전체 시간 을 가 져 오 는 것 과 비슷 합 니 다.하나의 이 벤트 를 감청 하고 속성 을 가 져 오 는 값 입 니 다.그러면 video 의 time update 이벤트 와 currentTime 속성 을 사용 합 니 다.
1 2 3 4 5 // myVideo.addEventListener("timeupdate", function(){     var currentTime = myVideo.currentTime;//     console.log(currentTime);// });
실행 되면 콘 솔 에서 많은 데 이 터 를 볼 수 있 습 니 다.
우 리 는 항상 한 가지 요 구 를 받 습 니 다.그것 은 바로 지난번 에 10 분 을 보 았 습 니 다.이번 에는 10 분부 터 봐 야 합 니 다.그러면 이 때 는 재생 점 을 설정 해 야 합 니 다.재생 점 을 설정 할 때 사용 하 는 지 currentTime 속성 을 설정 해 야 합 니 다.currentTime 속성 은 읽 고 쓸 수 있 습 니 다.주의해 야 할 것 은 설정 값 의 단 위 는 초 입 니 다.만약 에 재생 점 이 초 단위 가 아니라면 전환 을 해 야 합 니 다. 
1 2 3 4 // function playBySeconds(num){      myVideo.currentTime = num; }
넷 째,음량 의 획득 과 설정
재생 기 를 재생 하 는 과정 에서 잠시 멈 추고 재생 할 수 있 습 니 다.현재 어디 까지 재생 되 었 는 지,어느 시점 부터 재생 할 수 있 는 지 알 고 있 습 니 다.그러면 다음은 볼 륨 입 니 다.이 점 은 세 번 째 와 비슷 합 니 다.볼 륨 을 얻 으 려 면 볼 륨 속성 을 사용 하면 됩 니 다.하지만 여기 서 볼 륨 이 바 뀐 트리거 이 벤트 를 소개 합 니 다.앞으로 사용자 정의 UI 를 사용 해 야 합 니 다.바로 volume change 이벤트 입 니 다.
1 2 3 4 5 // myVideo.addEventListener("volumechange", function(){     var volume = myVideo.volume;//     console.log(volume);// });
컨트롤 바 를 통 해 볼 륨 을 바 꿀 때 디 버 깅 에 많은 데이터 가 있 는 것 을 볼 수 있 습 니 다.주의해 야 할 것 은 음량 의 범위 값 이 0~1 이 며,일반적으로 UI 에 서 는 백분율 을 사용 하기 때문에 필요 할 때 변환 해 야 한다.
볼 륨 은 속성 을 바 꾸 어 설정 할 수 있 습 니 다.재생 시점 과 비슷 하지만 볼 륨 은 volume 속성 을 설정 합 니 다.
1 2 3 4 // function setVol(num){     myVideo.volume = num; }
다음은 완전한 코드 입 니 다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

< html > < head >     < title >Video step2 title >     < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> head >

< body >     < video id = "myVideo" controls preload = "auto" width = 300 height = "165"     poster = "http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"     src = "http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4" >     video >

< script > var myVideo = document.getElementById('myVideo')// video     ,tol = 0 // ; myVideo.addEventListener("loadedmetadata", function(){     tol = myVideo.duration;// }); p > < p >// function play(){     myVideo.play(); } p > < p >// function pause(){     myVideo.pause(); } p > < p >// myVideo.addEventListener("timeupdate", function(){     var currentTime = myVideo.currentTime;//     console.log(currentTime);// }); p > < p >// function playBySeconds(num){     myVideo.currentTime = num; } p > < p >// myVideo.addEventListener("volumechange", function(){     var volume = myVideo.volume;//     console.log(volume);// }); p > < p >// function setVol(num){     myVideo.volume = num; } script >

body >

html >
요약:이 네 가지 절 차 를 통 해 html 5 태그 video(플레이어)의 기본 적 인 조작 을 알 수 있 습 니 다.이런 조작 은 주로 JS 를 통 해 video 의 사건 을 감청 하고 video 속성 에 대한 읽 기와 쓰 기 를 통 해 이 루어 집 니 다.이 네 가 지 를 잘 알 면 재생 기 를 유연 하 게 사용 할 수 있 습 니 다.그리고 응용 장 상황 에 따라 조정 하면 됩 니 다.

좋은 웹페이지 즐겨찾기