HTML5 비디오 태그에 대한 자세한 설명
- 黄舟원래의
- 2017-05-19 17:24:494470검색
이전 기사에서 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>
【相关推荐】