마카로닉스

526 No

[동영상강좌] 27강 ( 15장 ) - 15. HTML5로 동영상 연결하기 실습

2017-09-03 18:46:12 By 머나먼나라 0 3656 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

형식(코덱 이름)	특징	지원 브라우저
*.mp4(H.264)	성능으로 현재 널리 사용됨 있으나 일반인에게는 무료로 제공됨 주소유	IE, 사파리, 크롬
*.ogg(Theora, Vorbis)	없는 개방형 코덱	파이어폭스, 오페라, 크롬
*.webm(VP8, Vorbis)	없는 개방형 코덱 소유	크롬

HTML5 <video> 태그 사용법 익히기

동영상이 준비되면 다음 단계로 <video> 태그를 이용해서 시맨틱 마크업을 해주면 됩니다.
<video> 태그는 웹 문서에 동영상을 삽입하여 편리하게 사용할 수 있도록 도와주는 HTML5
에 새롭게 추가된 태그입니다. 또한 <source> 태그를 <video> 태그 안에 사용하여 다양한 동영상 코덱과 경로를 지정할 수 있습니다. 사용 형식은 다음과 같습니다.


<video 특성 =“값”>
    <source src=“동영상파일경로” type=“인코딩종류” />
</video>

인코딩 종류 : “video/mp4”, “video/ogg”, “video/webm”
특성과 값

특성	값	설명
width	픽셀	비디오 플레이어의 너비값을 지정함
height	픽셀	비디오 플레이어의 높이값을 지정함
autoplay	autoplay	화면이 나타나면서 동시에 재생되도록 함
controls	controls	비디오 컨트롤이 함께 나타나도록 함

여기서 특성 autoplay 와 controls 의 경우 값을 생략할 수 있습니다.

<video controls="controls" autoplay="autoplay" >  
</video>

<video controls autoplay>
</video>

조금 복잡해 보이지만 실제로 사용하는 엘리먼트는 video 와 source 밖에 없기 때문에 간단합니다. 실제 사용 예를 보겠습니다.

<h1>동영상 예제</h1>
    <video width="320" height="240" controls autoplay>
          <source src="video/virtual_university.mp4" type="video/mp4" />
          <source src="video/virtual_university.ogg" type="video/ogg" />
        <source src="video/virtual_university.webm" type="video/webm" />
          브라우저가 HTML5 video 엘리먼트를 지원하지 않습니다.

위의 경우는 mp4, ogg, webm의 세 개의 동영상을 모두 지원하도록 만들었습니다. HTM5의 표준이 정립되기 전까지는 이런 식으로 가급적 모든 브라우저를 지원해 주어야 합니다. video 엘리먼트에서는 width 와 height 값을 사용해서 동영상의 크기를 지정합니다. 또한 controls 와 autoplay 의 특성을 추가해서 시작과 동시에 재생되고 ‘비디오 컨트롤’ 이 함께 나타나도록 합니다.

만약 첫 화면에서 동영상이 멈춰 있기를 바란다면 autoplay를 생략하면 됩니다. 그리고 만약 세 개의 동영상 코덱을 지원하지 않는 브라우저로 접속한다면 안내 멘트를 video 엘리먼트 안에 내용으로 넣어주면 자동으로 표시됩니다.

HTML5 로 동영상 연결하기 실습

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <h1>동영상 예제</h1>
    <video width="320" height="240" controls autoplay>
  		<source src="video/virtual_university.mp4" type="video/mp4" />
  		<source src="video/virtual_university.ogg" type="video/ogg" />
        <source src="video/virtual_university.webm" type="video/webm" />
  		브라우저가 HTML5 video 엘리먼트를 지원하지 않습니다.
</video>
</body>
</html>

VideoJS란 무엇인가?

VideoJS 는 HTML5 와 플래시를 위한 하이브리드 오픈 소스 비디오 플레이어입니다. HTML5가 지금처럼 널리 사용되기 얼마 전까지만 해도 플래시나 실버라이트 플러그인을 이용하여 세련된 동영상을 웹에서 재생하였습니다. 하지만 플러그인 방식이 HTML5 에서는 표준이 아니므로 별도의 video 엘리먼트가 추가되었고, 특히 애플의 사파리 브라우저에서는 플래시로 만들어진 동영상 플레이어는 볼 수가 없습니다. 이러한 상황에서 VideoJS 는 HTML5도 지원하고 플래시도 지원할 수 있도록 자바스크립트와 CSS3를 제공합니다.

VideoJS

http://videojs.com 다운로드

파일이름	용도 설명
video.js	Video.JS 비디오 컨트롤러를 구동시키는 자바스크립트 파일입니다.
video-js.css	VideoJS 비디오 컨트롤러에 기본으로 들어가는 CSS 파일입니다.

CDN

<linkhref="http://vjs.zencdn.net/5.19.1/video-js.css"rel="stylesheet"><!-- If you'd like to support IE8 --><scriptsrc="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

<head>
  <link href="http://vjs.zencdn.net/5.19.1/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="MY_VIDEO.mp4" type='video/mp4'>
    <source src="MY_VIDEO.webm" type='video/webm'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="http://vjs.zencdn.net/5.19.1/video.js"></script>
</body>

http://videojs.com/getting-started/#download

비디오 컨트롤 스타일 바꾸기

이제 남은 작업은 CSS 스킨 중에 원하는 것을 추가하는 것입니다. 클래스 선택자를 다음처럼 추가합니다.

<video class="video-js vjs-default-skin" width="320" height="240" 
controls preload="auto" poster="video/most_value.jpg" data-setup="{}">

위 경우는 HTML <video> 태그 안에 “video-js vjs-default-skin” 클래스 선택자를 추가한 경우입니다. 또한 data-setup을 이용하여 다양한 옵션을 줄 수 있는데 초기값으로 기본값을 사용합니다.

VideoJs 로 세련된 동영상 플레이어 만들기

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    
    <!-- Video JS 설정 추가 -->  
    <link href="//vjs.zencdn.net/4.5/video-js.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/4.5/video.js"></script>
   
	<style type="text/css">     
		#video_canvas {
			margin-top: 0px;
			margin-right: auto;
			margin-bottom: 0px;
			margin-left: auto;
			width: 320px;
			height: 240px;
		}
		.content_style {
			padding-right: 0px;
			padding-left:  0px; 
		}
    </style>   
</head>

<body>
<div data-role="page" id="video_value" > 
    <div data-role="header" data-theme="b" >
        <a href="index.html" rel="external" data-icon="home" data-direction="reverse" class="ui-btn-left">Home</a>        
        <h1>최고의 가치</h1>
    </div> 
  	<div data-role="content" class="content_style" >
      <div id="video_canvas">            
                 <div>
                    <video class="video-js vjs-default-skin" width="320" height="240" controls preload="auto" poster="images/most_value.jpg" data-setup="{}">
                      <source src="video/virtual_university.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
                      <source src="video/virtual_university.ogv" type='video/ogg; codecs="theora, vorbis"' />
                      <source src="video/virtual_university.webm" type='video/webm; codecs="vp8, vorbis"' />
                    </video>
                    <p class="vjs-no-video"><strong>비디오 다운로드:</strong>
                      <a href="video/virtual_university.mp4" target="_blank">MP4</a>,
                      <a href="video/virtual_university.ogv" target="_blank">Ogg</a>,
                      <a href="video/virtual_university.webm" target="_blank">WebM</a>
                      <br>
                    </p>
                 </div> <!-- video-js Box 끝-->                 
            </div> <!-- video canvas 끝-->  
  	</div>
  	<div data-role="footer" data-theme="b">
 		<h2>버추얼 대학교</h2>
  	</div>
</div>
</body>
</html>

무료 비디오 인코더와 플레이어

http://mirovideoconverter.com/

HTML5 오디어 플레이어 만들기

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <h1>오디오 예제</h1>
    <audio controls>
  		<source src="audio/virtual_univ.ogg" type="audio/ogg" />
  		<source src="audio/virtual_univ.mp3" type="audio/mp3" />
  		브라우저가 HTML5 audio 엘리먼트를 지원하지 않습니다.
</audio>
</body>
</html>