HTML5는 사용자 정의 제어를 위해 DOM을 사용합니다.

이 글은 HTML5에서 사용자 정의 컨트롤을 위한 DOM의 사용을 주로 소개합니다. 이제 여러분과 공유합니다.

HTML5 동영상은 컨트롤을 표시하고 재생, 일시 중지 등을 제어하는 ​​데 사용할 수 있는 컨트롤이 있지만 브라우저마다 다른 효과가 표시될 수 있습니다. Dom을 사용하여 몇 가지 사용자 정의된 작업 및 컨트롤을 공유하겠습니다. HTML5 비디오는 컨트롤을 사용하여 컨트롤을 표시하고 재생, 일시 중지 등을 제어할 수 있지만 브라우저마다 다른 효과가 표시될 수 있으므로 일부 사용자 정의 작업 및 컨트롤을 수행하려면 Dom을 사용해야 하는 경우가 많습니다. 아래는 작은 예입니다.
물론 효과가 그다지 아름답지는 않습니다. 보기 좋게 만들고 싶다면 CSS 스타일을 직접 설정하면 됩니다.

<p id="video_p" style="text-align:center;"> 
<button onclick="playPause()">播放/暂停</button> 
<button onclick="toBig()">大</button> 
<button onclick="toNormal()">中</button> 
<button onclick="toSmall()">小</button> 
<video id="myVideo" width="500" height="250" style="margin-top:15px;"> 
<source src="demo.mp4" type="video/mp4" /> 
<source src="demo.ogg" type="video/ogg" /> 
您的浏览器不支持此HTML5 视频标签。 
</video> 
</p>

<script type="text/javascript"> 
var myVideo=document.getElementById("myVideo"); 
function playPause() 
{ 
if (myVideo.paused) 
myVideo.play(); 
else 
myVideo.pause(); 
} 
function toBig() 
{ 
myVideo.width=560; 
} 
function toNormal() 
{ 
myVideo.width=420; 
} 
function toSmall() 
{ 
myVideo.width=320; 
} 
</script>

모든 속성 중에서 videoWidth 및 videoHeight 속성만 즉시 사용할 수 있다는 점에 유의해야 합니다.
다른 속성은 동영상의 메타데이터가 로드된 후에만 사용할 수 있습니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

HTML5 터치 이벤트를 통해 모바일 측에 간단한 진행률 표시줄을 구현하는 방법

Html5 모바일 터미널 수상 경력에 빛나는 원활한 스크롤 애니메이션 구현

위 내용은 HTML5는 사용자 정의 제어를 위해 DOM을 사용합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!