풀페이지 동영상
<div class="wrap">
<div class="videowrapper">
<video id="bg_video" autoplay="" muted="" loop="" volume="0">
<source src="https://www.gfbr.kr/home/images/video_gfbr.mp4" type="video/mp4">
</video>
</div>
</div>
<style>
.wrap {
width:100vw;
height:100vh;
}
.videowrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
padding-top: 25px;
height: 100%;
}
.videowrapper video {
position: absolute;
top: 0;
left: 0;
height: 100%;
border: none;
}
</style>http://eehd80.dothome.co.kr/work/forest/v4/
광릉숲 생물권보전지역
UNESCO Gwangneung Forest Biosphere Reserve 생물권보전지역 자연생태자원 문화역사자원 인적자원 국립수목원 제공
eehd80.dothome.co.kr
HTML로 비디오 재생
HTML5 이전에는 플러그인 (예 : 플래시)이있는 브라우저에서만 비디오를 재생할 수있었습니다.
HTML5 <video>요소는 웹 페이지에 비디오를 포함시키는 표준 방법을 지정합니다.
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>이 controls속성은 재생, 일시 중지 및 볼륨과 같은 비디오 컨트롤을 추가합니다.
항상 width및 height속성을 포함하는 것이 좋습니다 . 높이와 너비를 설정하지 않으면 비디오가로드되는 동안 페이지가 깜박일 수 있습니다.
이 <source>요소를 사용하면 브라우저에서 선택할 수있는 대체 비디오 파일을 지정할 수 있습니다. 브라우저는 처음 인식 된 형식을 사용합니다.
<video>및 </video>태그 사이의 텍스트 는 <video>요소를 지원하지 않는 브라우저에만 표시됩니다 .
HTML <비디오> 자동 재생
비디오를 자동으로 시작하려면 autoplay속성을 사용하십시오 .
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
HTML 비디오-메서드, 속성 및 이벤트
HTML5는 <video>요소에 대한 DOM 메소드, 특성 및 이벤트를 정의합니다 .
이를 통해 비디오를로드, 재생 및 일시 정지하고 지속 시간 및 볼륨을 설정할 수 있습니다.
비디오가 재생을 시작하거나 일시 정지하는 등을 알려주는 DOM 이벤트도 있습니다.
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
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>
<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
https://www.w3schools.com/html/html5_video.asp
www.w3schools.com
'Publishing > HTML' 카테고리의 다른 글
| 회원가입 폼 (0) | 2020.07.24 |
|---|---|
| HTML5 Canvas (0) | 2020.02.13 |
| HTML5 audio (0) | 2020.02.13 |
| HTML5의 새로운 태그 (0) | 2020.02.13 |
| HTML 기본 layout (0) | 2020.02.12 |