H5 새로운 속성 오디오 및 비디오 제어 코드 예제에 대한 자세한 설명
- 黄舟원래의
- 2017-05-19 16:53:251782검색
이 글에서는 새로운 H5 속성 audioaudio 및 videovideo(권장)의 제어 세부 사항(권장)을 주로 소개합니다. . 관심이 있다면 학생들은 이에 대해 배울 수 있습니다.
이 글에서는 H5의 새로운 속성인 오디오와 비디오의 제어에 대해 다음과 같이 설명합니다.
1. 오디오(오디오)
<audio controls="controls"> <source src="这里面放入音频文件路径"></source> </audio>
2. 동영상
<video controls="controls" loop="loop" autoplay="autoplay" id="video"> <source src="这里面放入视频文件路径"></source> </video> <button>静音</button> <button>打开声音</button> <button>播放</button> <button>停止播放</button> <button>全屏</button>
동영상 파일의 제어는
javascript가 나옵니다.
<script>
var myVideo=document.getElementById("video");
var btn=document.getElementById("button");
btn[0].click=function(){
myVideo.muted=true;(是否静音：是)
}
btn[1].click=function(){
myVideo.muted=true;(是否静音：否)
}
btn[2].click=function(){
myVideo.play();(播放)
}
btn[3].click=function(){
myVideo.pause();(停止播放)
}
btn[4].click=function(){
myVideo.webkitrequestFullscreen();(全屏显示)
}
</script>3. 진행률 표시줄과 동영상 재생 시간
을 동기화하도록 설정하는 방법입니다.
그림과 같습니다:
여기서 먼저 이야기하겠습니다.
(1) 비디오를 가져와야 합니다(기간) 진행률 표시줄에 최대값을 할당합니다. Progress.max=video.duration;
(2). 현재 비디오 재생의 현재 시간 위치를 가져와야 합니다(current시간 )은 현재 진행률 표시줄의 길이인 Progress.value=video.currentTime;
에 할당됩니다. 그런 다음 동영상이 재생되는 동안 진행률 표시줄의 값을 통해 비디오 길이와 현재 재생 시간 위치를 시간적으로 얻을 수 있습니다.
타이머 setInterval(pro, 100);을 열어야 합니다. 즉, 적시성을 보장하기 위해 1밀리초마다 한 번씩 비디오의 값을 가져와 진행 진행률 표시줄에 할당해야 합니다.
이렇게 하면 진행률 표시줄이 영상과 정확하게 동기화될 수 있습니다.
4. 양식 요소의 range 속성을 사용하여 동영상의 볼륨을 조절하는 방법입니다.
1. 먼저 범위 값을 가져와서 비디오 볼륨에 할당해야
<input type="range" min="0" value="50" max="100" id="range" />
var ran=document.getElementById("range");범위를 얻을 수 있습니다. value,
비디오에 오디오 속성 할당: video.volume=range.value/100;
이때 간단히 범위를 드래그하여 비디오의 볼륨을 제어할 수 있습니다.
그러면 이전 사운드가 꺼졌는지 판단해야 합니다. 둘은 독립적인 이벤트이므로 드래그 이벤트에서 음소거 여부를 판단한 후 음소거로 설정해야 합니다. 거짓으로.
최종 구현 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<body>
<video id="video1" controls="controls" width="400px" height="400px">
<source src="img/1.mp4">
</video>
<p>
<button onclick="enableMute()" type="button">关闭声音</button>
<button onclick="disableMute()" type="button">打开声音</button>
<button onclick="playVid()" type="button">播放视频</button>
<button onclick="pauseVid()" type="button">暂停视频</button>
<button onclick="showFull()" type="button">全屏</button><br />
<span>进度条:</span>
<progress value="0" max="0" id="pro"></progress>
<span>音量:</span>
<input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/>
</p>
<script>
var btn=document.getElementsByTagName("button");
var myvideo=document.getElementById("video1");
var pro=document.getElementById("pro");
var ran=document.getElementById("ran");
//关闭声音
function enableMute(){
myvideo.muted=true;
btn[0].disabled=true;
btn[1].disabled=false;
}
//打开声音
function disableMute(){
myvideo.muted=false;
btn[0].disabled=false;
btn[1].disabled=true;
}
//播放视频
function playVid(){
myvideo.play();
setInterval(pro1,1000);
}
//暂停视频
function pauseVid(){
myvideo.pause();
}
//全屏
function showFull(){
myvideo.webkitrequestFullscreen();
}
//进度条展示
function pro1(){
pro.max=myvideo.duration;
pro.value=myvideo.currentTime;
}
//拖动range进行调音量大小
function setvalue(){
myvideo.volume=ran.value/100;
myvideo.muted=false;
}
</script>
</body>
</html>[관련 추천]
1.html5 영상에 대한 자세한 설명입니다. 태그 테스트 애플리케이션
2.video 요소를 사용하여 HTML 5에서 비디오 플레이어 만들기
4.H5 비디오 태그에서 소리만 재생되고 비디오는 재생되지 않는 문제 해결
5.IIS MIME은 MP4 유형을 등록하지 않습니다. 비디오 태그를 인식할 수 없는 문제를 해결합니다
위 내용은 H5 새로운 속성 오디오 및 비디오 제어 코드 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!