집 > 기사 > 웹 프론트엔드 > HTML5 비디오 태그의 재생 제어

HTML5 비디오 태그의 재생 제어

不言원래의: 2018-06-11 17:15:328895검색

이 글에서는 주로 HTML5 비디오 태그의 재생 제어 방법을 소개합니다. 이 글에서는 동영상의 전체 재생 시간을 가져오는 방법, 재생, 일시 정지, 동영상의 재생 시간을 가져오는 방법, 재생 지점 설정, 볼륨을 가져오고 설정하는 방법, 도움이 필요한 친구는 다음을 참고하세요

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

이 기사의 목차:

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

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

플레이어(동영상)를 작동하려면 먼저 동영상에 대한 정보를 얻어야 하는데, 그 중 하나가 콘텐츠 외에 전체 재생 시간입니다. , 총 지속 시간도 가장 먼저 표시됩니다. 동영상을 실행하기 전에 동영상 태그에 ID를 추가하면 동영상 요소를 쉽게 얻을 수 있습니다

<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 -loadedmetadata, 이 이벤트의 트리거는 메타데이터(미디어의 일부 기본 정보)가 로드되었음을 나타냅니다. 이벤트를 수신하려면 addEventListener를 사용하세요

var myVideo = document.getElementById(&#39;myVideo&#39;);//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
    //要执行的代码
});
     好了，已经监听了，那么接下来要做的就是获取总时长，其实就是一个属性-duration
var myVideo = document.getElementById(&#39;myVideo&#39;)//获取video元素
    ,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
    tol = myVideo.duration;//获取总时长
});

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

두 번째, 재생 및 일시정지

플레이어의 가장 기본적인 기능은 재생 및 일시정지이며, 총 지속시간을 구한 후 다음 작업은 재생 및 일시정지입니다. 이때 사용되는 영상 방식은 재생과 일시정지 2가지 입니다

var myVideo = document.getElementById(&#39;myVideo&#39;)//获取video元素
    ,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
  tol = myVideo.duration;//获取总时长
 });</p>
<p> //播放
 function play(){ 
     myVideo.play();
 }</p>
<p> //暂停
 function pause(){ 
     myVideo.pause();
 }

재생이 완료된 후 재생 방식을 실행하면 처음부터 재생된다는 점 참고하시기 바랍니다.

셋째, 동영상의 재생 시간을 가져오고 재생 지점을 설정합니다.

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

종종 요청을 받습니다. 즉, 마지막으로 시청한 지 10분이 지났는데, 이번에는 10분부터 시청을 시작하고 싶습니다. 그런 다음 재생 지점을 설정해야 합니다. 현재 재생 지점을 설정하는 데에는 currentTime 속성이 사용되며, 설정 값의 단위는 초 단위가 아닙니다.

//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
   var currentTime = myVideo.currentTime;//获取当前播放时间
   console.log(currentTime);//在调试器中打印
});

4. 볼륨 획득 및 설정

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

//设置播放点
function playBySeconds(num){ 
    myVideo.currentTime = num;
}

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

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

//音量改变时
myVideo.addEventListener("volumechange", function(){
   var volume = myVideo.volume;//获取当前音量
   console.log(volume);//在调试器中打印
});

다음은 전체 코드입니다.

//设置音量
function setVol(num){ 
   myVideo.volume = num;
}

요약: 이 네 가지를 사용하세요 html5 태그 비디오(플레이어)의 기본 동작을 이해하는 단계로, 이러한 작업은 주로 JS를 통해 비디오 이벤트를 모니터링하고 비디오 속성을 읽고 쓰는 작업을 수행합니다. 이 네 가지 사항에 익숙하다면 플레이어를 유연하게 사용할 수 있습니다. 그런 다음 응용 프로그램 시나리오에 따라 조정하십시오.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

HTML5 비디오 태그의 재생 제어

관련 기사