> 웹 프론트엔드 > H5 튜토리얼 > 사용자 정의 컨트롤 샘플 코드에 DOM을 사용하는 HTML5에 대한 자세한 설명

사용자 정의 컨트롤 샘플 코드에 DOM을 사용하는 HTML5에 대한 자세한 설명

黄舟
풀어 주다: 2017-03-20 15:50:39
원래의
1816명이 탐색했습니다.

HTML5 비디오는 컨트롤을 사용하여 컨트롤을 표시하고 재생 및 일시 중지 등을 제어할 수 있지만 브라우저에 따라 표시 효과가 다를 수 있습니다. Dom은 일부 사용자 정의 작업 및 컨트롤을 수행하는 데 사용됩니다

HTML5 비디오는 컨트롤을 사용하여 컨트롤을 표시하고 재생 및 일시 중지 등을 제어할 수 있지만 브라우저마다 다른 효과가 표시될 수 있으므로 여러 번 필요합니다. Dom을 사용하여 일부 맞춤형 작업 및 제어를 수행하세요. 아래는 작은 예입니다.
물론 효과가 그다지 아름답지는 않습니다. 보기 좋게 만들고 싶다면 CSS 스타일을 직접 설정하면 됩니다.

<div id="video_div" 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> 
</div>
로그인 후 복사
<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 속성만 즉시 사용할 수 있다는 점에 유의하세요.

동영상의 메타데이터가 로드될 때까지 다른 속성을 사용할 수 없습니다.

위 내용은 사용자 정의 컨트롤 샘플 코드에 DOM을 사용하는 HTML5에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿