이전 기사에서 Xiaoqiang의 HTML5 모바일 개발 길(5) - 아름다운 비디오 플레이어 만들기, 매우 사용하기 쉬운 플레이어를 만들었습니다. 일부 친구들은 원리에 대해 잘 모릅니다. 이전 기사를 바탕으로
1. 사용 기술
HTML5에서는
<video src="move.mp4"></video>
비디오 태그에는 컨트롤 속성과 같은 많은 속성이 있으며 콘솔 존재 여부를 제어할 수 있습니다.
<video src="move.mp4" controls="controls"> 浏览器不支持HTML5的视频播放功能 </video>
위의 비디오 형식에서 다양한 브라우저가 다양한 비디오 형식을 지원한다는 것을 알 수 있으므로
<video width="400" controls="controls"> <source src="move.mp4" type="video/mp4" /> <source src="move.ogg" type="video/ogg" /> </video>
2. 비디오 태그 속성
비디오 태그는 HTML5의 전역 속성과 이벤트 속성을 지원합니다.
고유 속성은 다음과 같습니다.
속성 값 ~ .
preload preload
이 속성이 나타나면 페이지가 로드되고 재생할 준비가 되면 동영상이 로드됩니다.
"autoplay"를 사용하는 경우 이 속성은 무시됩니다.
src url 재생할 영상의 URL입니다.
너비 픽셀 비디오 플레이어의 너비를 설정합니다.
대부분의 브라우저에서 지원되는 비디오 메서드 및 속성 이벤트
pause() currentTime 일시 중지
load() videoWidth 진행
canPlayType videoHeight 오류
기간 timeupdate
종료됨 종료됨
오류 중단
🎜>
volume loadedmetadata
height
width
注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。
三、从实例中了解Video标签的使用
<!DOCTYPE html> <html> <body> <p style="text-align:center;"> <!--定义按钮,并添加事件监听函数--> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" /> <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" /> <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" /> <p>您的浏览器不支持此HTML5标签</p> </video> </p> <script type="text/javascript"> //得到video标签对象 var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>
【相关推荐】