이 기사는 H5 새로운 속성 오디오 오디오 및 비디오 비디오의 제어를 알려줍니다.
1. 오디오 (오디오)<Udio controls = controls> <소스 src = 오디오 파일 경로를 넣습니다> </source> </audio>2. 비디오 (비디오)
<video controls = controls loop = loop autoplay = autoplay id = video> <소스 src = 비디오 파일 경로를 넣습니다> </source> </video> <button> </button> on> 사운드 열기 < /button> <button> 재생 </button> <button> 재생 중지 </button> <button> 전체 화면 </button>
다음은 비디오 파일의 제어입니다.
자바 스크립트 리드.
<cript> var myvideo = getElementById (video); btn. 1] .click = function () {myvideo.muted = true; ); (재생 중지)} btn [4] .click = function () {myvideo.webkitrequestfulscreen ()} </script> 3. 진행률 바 및 비디오의 재생 시간을 설정하는 방법동기.
그림과 같이 :
우선 여기서 그것에 대해 이야기하겠습니다
(1) 비디오의 비디오의 전체 길이의 최대 값은 진행률 표시 줄에 대한 진행 상황, max = video.duration;
(2), 현재 비디오 재생의 현재 위치의 길이를 현재 진행 상황 막대의 길이로 가져와야한다. value = video.currenttime;
그런 다음 비디오 재생하는 동안 진행률 표시 줄의 값이 비디오의 지속 시간과 현재 재생 시간 위치를 시간에 맞출 수 있도록해야합니다.
타이머 SetInterval (Pro, 100); :: 이는 적시를 보장하기 위해 비디오 값이 1 밀리 초의 진행 상황 바에 할당된다는 것을 의미합니다.
이러한 방식으로 진행률 표시 줄은 비디오와 정확하게 동기화 될 수 있습니다.
4. 테이블 요소의 범위 속성으로 비디오의 볼륨을 제어하는 방법.1. 우선, 비디오의 볼륨을 제어하려면 범위의 값 값과 비디오에 주어진 볼륨을 가져와야합니다.
<입력 유형 = 범위 최소 = 0 값 = 50 max = 100 id = 범위 /> var ran = document.getElementById (범위);
range.value를 얻으십시오.
비디오에 할당 된 오디오 속성 : video.volume = range.value/100;
현재 단순히 범위를 드래그하고 비디오 제어의 볼륨.
그런 다음 판단을 닫으려면 독립적 인 이벤트입니다.
최종 코드는 다음과 같습니다.
<! doctype html> <html> <body> <video id = video1 controls = 400px 높이 = 400px> <소스 src = img/1.mp4> </video> <button onclick = enablemute () > 사운드를 닫습니다 </button> <버튼 onclick = disablemute () type = button> 사운드 열기 </button> <button onclick = playvid () type = button> 비디오 재생 </button> <button onclick = pauvid () 유형 = 버튼> 비디오 전달 </button> <버튼 onclick = showfull () type = button> 전체 화면 </button> <span> 진행 : </span> <진행 값 = 0 max = 0 id = pro> </progress > <span> 볼륨 : </span> <입력 유형 = 범위 최소 = 0 max = 100 value = 50 onchange = setValue () id = ran/> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> var btn = document.getElementsByTagName (버튼) var myvideo ]. Disabled; Disablemute () {myvideo.muted = false; } // 비디오 함수 playvid () {myvideo.play ();}; funch setValue () {) {) myvideo.volume = ran.value/100;위는이 기사의 모든 내용입니다.