HTML5 비디오 태그(플레이어) 학습 노트(2): 재생 제어_html5 튜토리얼 기술

이전 글에서는 html5 태그 동영상(플레이어)을 초기화하기 위해 해야 할 작업과 html5 플레이어를 간단하고 빠르게 사용하는 방법을 소개했습니다. 이번 글에서는 JS를 사용하는 방법에 대해 중점적으로 살펴보겠습니다. 비디오 태그를 조작하는 방법과 플레이어 재생 및 일시 정지, 볼륨 읽기 및 설정, 기타 쓰기 관련 작업을 포함하여 비디오에 대한 간단하고 기본적인 작업을 수행하여 플레이어 확장을 시작하는 방법입니다.

이 기사의 목차:

1. 동영상의 전체 재생 시간 가져오기
2. 재생 및 일시 정지
3. 동영상 재생 시간 가져오기 및 재생 지점 설정
4. 볼륨 가져오기 및 설정

먼저 동영상의 전체 재생 시간을 가져옵니다

플레이어(동영상)를 작동할 때 가장 먼저 얻어야 할 것은 동영상에 대한 일부 정보이며, 그 중 하나는 콘텐츠 외에 전체 재생 시간도 가장 먼저 표시되는 것입니다. . 영상을 구동하기 전, 영상 요소를 쉽게 얻을 수 있도록 영상 태그에 ID를 추가해주세요

코드 복사

코드는 다음과 같습니다.

ID를 설정한 후 작업을 시작할 수 있습니다. 총 재생 시간을 얻으려면 로드된 메타데이터의 이벤트를 사용해야 합니다. 이 이벤트의 트리거는 메타데이터(미디어의 일부 기본 정보)가 있음을 나타냅니다. addEventListener 사용 이벤트 듣기

코드 복사

코드는 다음과 같습니다.

var myVideo = document.getElementById( 'myVideo');//동영상 요소 가져오기

myVideo.addEventListener("loadedmetadata", function(){

//실행할 코드
});
좋습니다. 그러면 다음으로 해야 할 일은 총 지속 시간을 가져오는 것입니다. 이는 실제로 지속 시간 속성입니다.
var myVideo = document.getElementById('myVideo')//비디오 요소 가져오기
,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//총 재생 시간 가져오기
});



획득된 총 지속 시간의 단위는 초이며 표시 시 필요에 따라 변환해야 합니다. 

둘째, 재생, 일시정지

플레이어의 가장 기본적인 기능은 재생 및 일시정지입니다. 전체 재생 시간을 얻은 후 다음 작업은 재생 및 일시정지입니다. 이때 사용되는 영상의 방법은 재생과 일시정지 2가지

코드복사

코드는 다음과 같습니다.

var myVideo = document.getElementById('myVideo')//비디오 요소 가져오기

, tol = 0

;
myVideo.addEventListener("loadedmetadata", function() {
tol = myVideo.duration;//총 재생 시간 가져오기
});

//재생
function play(){
myVideo.play();
}

//Pause
function Pause(){
myVideo.pause();
}


재생 메소드는 재생 후에 실행된다는 점에 유의하세요. 완료되면 처음부터 재생됩니다.

세번째, 영상의 재생시간을 얻어와 재생지점을 설정하세요

플레이어가 재생 및 일시중지된 후 다음으로 확인해야 할 것은 동영상이 재생된 시간과 재생된 시점입니다. 이 작업은 이벤트를 수신하고 속성 값을 가져오는 것과 매우 유사합니다. 그런 다음 비디오의 timeupdate 이벤트와 currentTime 속성이 사용됩니다.

코드 복사

코드는 다음과 같습니다.

//재생 시점이 업데이트될 때

myVideo.addEventListener("timeupdate" , function(){

var currentTime = myVideo.currentTime;//현재 재생 시간 가져오기
console.log(currentTime);//디버거에서 인쇄
});


실행하고 나면 콘솔에 많은 데이터가 표시됩니다...

저번에 시청한 지 10분이 지났다는 요청을 자주 받습니다. 그러면 이번에는 10분부터 시청을 시작하겠습니다. currentTime 속성은 여전히 ​​재생 지점을 설정하는 데 사용되며, 설정 값의 단위는 초 단위로 변환되어야 합니다.

코드 복사

코드는 다음과 같습니다.

//플레이 포인트 설정
function playBySeconds(num){
myVideo.currentTime = num;
}

넷째, 볼륨 획득 및 설정

플레이어는 재생 중에 일시 중지하고 재생할 수 있으며 현재 재생 중인 위치를 알고 특정 시점부터 재생을 시작할 수 있습니다. 그러면 다음 작업은 볼륨입니다. 이는 세 번째 점과 비슷합니다. 볼륨을 얻기 위해 볼륨 속성을 직접 사용할 수 있습니다. 그러나 여기서도 소개할 것은 볼륨 변경을 위한 트리거 이벤트입니다. 는 볼륨변경 이벤트

코드복사

코드는 다음과 같습니다

/ /볼륨이 변경될 때
myVideo.addEventListener("volumechange" , function(){
var Volume = myVideo.volume;//현재 볼륨 가져오기
console.log(volume);//인쇄 디버거
});

컨트롤 막대를 통해 볼륨을 변경하면 디버거에 많은 데이터가 표시됩니다. 참고로 볼륨의 범위는 0~1이며, UI에서는 일반적으로 백분율을 사용하므로 필요한 경우 변환이 필요합니다.

속성을 ​​변경하여 볼륨을 설정할 수 있는데, 볼륨 속성으로 볼륨을 설정한다는 점만 빼면 재생 시점과 유사합니다.

코드 복사

코드는 다음과 같습니다.

//볼륨 설정
function setVol(num){
myVideo.volume = num;
}

다음은 전체 코드입니다.

코드 복사

코드는 다음과 같습니다:

<동영상 ID ="myVideo"는 preload="auto" 너비 =300 height="165"
포스터="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
src="를 제어합니다. http://www.w3cschool.cc/try /demo_source/mov_bbb.mp4">

<script><br>var myVideo = document.getElementById('myVideo')/ /동영상 요소 가져오기 <br> ,tol = 0 //총 재생 시간<br>;<br>myVideo.addEventListener("loadedmetadata", function(){<br> tol = myVideo.duration;//총 재생 시간 가져오기 <br>});</p> <p>//Play<br>function play(){ <br> myVideo.play();<br>}</p> <p>//일시 중지<br>함수 일시 중지(){ <br> myVideo.pause();<br>}</p> <p>//재생 시점이 업데이트되는 경우<br>myVideo.addEventListener("timeupdate", function(){<br> var currentTime = myVideo.currentTime;//현재 재생 시간을 가져옵니다<br> console. log(currentTime );//디버거에서 인쇄<br>});</p> <p>//재생 지점 설정<br>function playBySeconds(num){ <br> myVideo.currentTime = num;<br>}</p> <p>//볼륨이 변경되는 경우<br>myVideo.addEventListener("volumechange", function(){<br> var Volume = myVideo.volume;//현재 볼륨 가져오기<br> console.log(volume) ;/ /디버거에서 인쇄<br>});</p> <p>//볼륨 설정<br>function setVol(num){ <br> myVideo.volume = num;<br>}<br></script>

< ;/html>

요약: 이 4단계를 사용하여 html5 태그 비디오(플레이어)의 기본 작업을 이해하며, 이러한 작업은 주로 JS를 통해 비디오 이벤트를 모니터링하고 비디오 속성을 조작하는 것입니다. 이 네 가지 사항을 숙지하시면 플레이어를 유연하게 사용하실 수 있으며, 적용 시나리오에 따라 조정하시면 됩니다.