HTML5 비디오 태그 동작에 대한 자세한 설명 영상

이번에는 HTML5 동영상 태그 작업 동영상에 대한 자세한 설명을 가져왔는데, HTML5 동영상 태그 작업 동영상의 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

현재 웹사이트 제작에 관한 연구에서는 각계각층의 사람들이 사용을 중단하지 않고 지속적으로 연구하고 있습니다. 그 중에서도 HTML5의 사용은 아직까지 동영상을 사용하지 않은 사람들이 많다고 생각합니다. 재생을 제어하는 ​​방법을 알고 있다면 이 문서에서 재생을 제어하는 ​​구체적인 방법을 소개합니다. 관심이 있다면 함께 알아보세요.

이 기사의 내용:

1. 동영상의 총 재생 시간을 알아보세요

2. 재생, 일시정지

3. 영상 재생 시간 가져오기 및 플레이 포인트 설정

4. 볼륨 획득 및 설정

먼저, 동영상의 총 재생 시간을 알아보세요

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

코드 복사

코드는 다음과 같습니다

ID를 설정한 후 작업을 시작할 수 있습니다. 전체 기간을 얻으려면 동영상의 이벤트 로드된 메타데이터를 사용해야 합니다. 이 이벤트가 트리거되면 메타데이터(미디어의 일부 기본 정보)가 생성되었음을 나타냅니다. 이벤트를 수신하려면 addEventListener를 사용하세요

코드 복사

코드는 다음과 같습니다:

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;//获取总时长
});

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

둘째, 재생 및 일시정지

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

코드 복사

코드는 다음과 같습니다:

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();
}

재생이 완료된 후 play 메서드를 실행하면 처음부터 재생이 시작된다는 점에 유의하세요.

셋째, 영상의 재생시간을 얻어서 재생지점을 설정해주세요

플레이어가 재생 및 일시 중지된 후 다음으로 확인해야 할 것은 비디오가 재생된 시간과 재생된 시점입니다. 이 작업은 전체 기간을 가져오는 것과 매우 유사하며 이벤트를 듣고 속성 값을 가져오는 것이 필요합니다. 그런 다음 비디오의 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;
}

전체 코드는 다음과 같습니다.

<script>
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();
}</p> <p>//播放时间点更新时
myVideo.addEventListener(&quot;timeupdate&quot;, 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>

总结：通过这四个步骤来了解html5标签video（播放器）的基本操作，而这些操作主要是通过JS来监听video的事件和对video属性的读写来完成的，熟悉这四点即可灵活的在使用播放器，再根据应用场景来调整即可。       

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

django控件及传参使用详解

Echarts实现动态变色柱状图

jQuery操作textarea输入字数限制

위 내용은 HTML5 비디오 태그 동작에 대한 자세한 설명 영상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!