HTML5 Video (fullpage Video)

Publishing/HTML

HTML5 Video (fullpage Video)

oodada 2020. 2. 13. 03:41

풀페이지 동영상

<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

HTML5 Video

HTML5 Video Playing Videos in HTML Before HTML5, a video could only be played in a browser with a plug-in (like flash). The HTML5 element specifies a standard way to embed a video in a web page. Browser Support The numbers in the table specify the first br

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

현재글HTML5 Video (fullpage Video)

odada