동영상 태그 소개
대부분의 사용자가 Flash 플러그인을 설치했지만(실제로 인터넷 사용자의 약 95%가 특정 버전의 Flash를 설치했습니다.) HTML 5 지지자들은 플러그인이 필요 없는 개방형 비디오 표준을 추진하고 있습니다. 이는 Flash와 같은 독점 플러그인 없이도 비디오를 삽입하고 상호 작용할 수 있는 방법을 제공하는 HTML 5의 새로운
지금까지는 웹 페이지에 동영상을 표시하는 기준이 없었습니다.
브라우저 지원
Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari는 <video> 요소를 지원합니다.
참고: 인터넷 Explorer 8 이하 버전의 IE는 <video> 요소를 지원하지 않습니다.
동영상 태그 사용
동영상 태그에는 src, 포스터, 사전 로드, 자동 재생, 루프, 컨트롤, 너비, 높이와 같은 여러 속성이 포함되어 있습니다. 등, 내부 태그 <source>를 포함합니다. Video 태그에는 <source> 태그 외에도 지정된 동영상을 재생할 수 없을 때 반환되는 콘텐츠가 포함될 수도 있습니다.
(1) src 속성과 포스터 속성
src 속성이 어떤 용도로 사용되는지 짐작할 수 있습니다. <img> 태그와 마찬가지로 이 속성은 동영상의 주소를 지정하는 데 사용됩니다. 포스터 속성은 현재 비디오 데이터가 유효하지 않을 때 표시할 그림(미리보기 그림)을 지정하는 데 사용됩니다. 잘못된 비디오 데이터는 비디오가 로드 중이거나 비디오 주소가 정확하지 않을 수 있음을 의미할 수 있습니다.
(2) preload 속성
이 속성은 이름으로도 이해할 수 있습니다. 비디오가 미리 로드되어 있습니다. 속성에는 없음, 메타데이터 및 자동이라는 세 가지 선택적 값이 있습니다. 이 속성을 사용하지 않는 경우 기본값은 auto입니다.
없음: 사전 로드가 없습니다. 이 속성 값을 사용하면 페이지 작성자가 사용자가 이 비디오를 기대하지 않는다고 믿거나 HTTP 요청을 줄일 수 있습니다.
메타데이터: 부분적으로 사전 로드됨. 이 속성 값을 사용한다는 것은 페이지 작성자가 사용자가 이 비디오를 기대하지 않는다고 생각하지만 사용자에게 일부 메타데이터(크기, 첫 번째 프레임, 트랙 목록, 재생 시간 등 포함)를 제공한다는 의미입니다.
자동: 모두 사전 로드되어 있습니다.
(3) 자동 재생 속성
은 이름으로 용도를 알 수 있는 또 다른 속성입니다. Autoplay 속성은 비디오의 자동 재생 여부를 설정하는 데 사용됩니다. 이는 Boolean 속성입니다. 표시되면 자동재생을 의미하며, 제거되면 자동재생이 되지 않는다는 의미입니다.
HTML의 부울 속성 값은 참과 거짓이 아니라는 점에 유의하세요. 올바른 사용법은 태그에서 이 속성을 사용하여 true를 나타내는 것입니다. 이때 속성에는 값이 없거나 해당 값이 해당 이름과 같습니다(여기서 자동 재생은 <video autoplay /> 또는 <video autoplay입니다. =" autoplay" />); 태그에 이 속성을 사용하지 않으면 false를 의미합니다(여기서 자동 재생이 아닌 것은 <video />).
(4) 루프 속성
한눈에 보면 loop 속성은 동영상이 루프로 재생되는지 여부를 지정하는 데 사용되며, 이 역시 부울 속성입니다.
(5) 제어 속성
Controls 속성은 페이지 작성자가 재생 컨트롤러를 생성하기 위해 스크립트를 사용하지 않았음을 브라우저에 나타내는 데 사용됩니다. 브라우저는 자체 재생 제어 열을 활성화해야 합니다.
컨트롤 바에는 재생 일시정지 제어, 재생 진행률 제어, 볼륨 제어 등이 포함되어야 합니다.
각 브라우저의 기본 재생 컨트롤 바는 인터페이스에서 다릅니다. 내 브라우저의 이상한 문제로 인해 Firefox와 Safari의 비디오 태그가 제대로 작동하지 않아서 온라인에서 이 두 가지의 스크린샷만 찾을 수 있습니다.
(6) width 속성과 height 속성
은 말할 필요도 없이 태그의 공통 속성입니다.
비디오 형식 및 브라우저 지원
현재 <video> 요소는 MP4, WebM 및 Ogg의 세 가지 비디오 형식을 지원합니다.
브라우저 🎜>Internet Explorer 예 예 아니요 아니요 Chrome 예 예 예 Firefox Opera 25 이상) 예 예 예 MP4 = H.264 비디오가 포함된 MPEG 4 파일 인코딩 및 AAC 오디오 인코딩
WebM = VP8 비디오 인코딩 및 Vorbis 오디오 인코딩이 포함된 WebM 파일
Ogg = Theora 비디오 인코딩 및 Vorbis 오디오 인코딩 Ogg 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=600;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>