HTML5 태그로 동영상을 삽입해보자.

https://msdn.microsoft.com/ko-kr/library/hh924820(v=vs.85).aspx

굉장히 잘 설명되어있다.

<video src="demo.mp4" controls autoplay loop muted preload="auto" poster="demo.jpg" >
HTML5 Video is required for this example
</video> 

기본형식. 자동재생, 반복재생, 소리없음, 겉표지 삽입된 태그다.

아래는 각각 다른 파일 확장자를 첨부하여 모든 웹브라우저에 동작하게한다. IE,크롬,사파리라면 mp4파일로만 올려도 충분. 

 <video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>             
   <p>Fallback code if video isn't supported</p>/
 </video>

컨트롤 특성은 아래와같다.

특성	설명
src	동영상 파일을 가리키는 URL을 나타내는 문자열입니다.
controls	기본 제공 재생 컨트롤 집합을 설정하는 부울 특성입니다. 여기에는 일반적으로 재생, 일시 중지, 검색 및 볼륨 설정이 포함됩니다. Internet Explorer 10에는 여러 오디오 및 텍스트 트랙을 선택할 수 있는 컨트롤도 표시됩니다.
poster	동영상 플레이어에 표시되는 자리 표시자 이미지를 나타내는 문자열입니다. 해당 지점에 원본이 설정되어 있지 않거나 콘텐츠를 로드하는 중이어서 동영상을 사용할 수 없는 경우에만 포스터 이미지가 표시됩니다.
loop	컨트롤의 일시 중지 단추를 누르거나 스크립트에서 pause 메서드를 호출할 때까지 동영상을 반복적으로 재생하는 부울 특성입니다.
muted	오디오 트랙을 끈 상태로 동영상을 재생하는 부울 특성입니다.
autoplay	플레이어에서 콘텐츠를 충분히 버퍼링한 이후에 동영상 재생을 자동으로 시작하는 부울 특성입니다.
preload	얼마 만큼 버퍼링해야 하는지에 대한 힌트를 정의하는 부울 특성입니다.
height	동영상 플레이어의 높이(픽셀)를 설정합니다.
width	동영상 플레이어의 너비(픽셀)를 설정합니다.

이제 파일을 하나 올려두고 해당 파일의 주소를 따오자. 티스토리에 파일로 mp4파일을 올려둔다. 오른클릭 링크주소를 얻자.

 <video src="http://msking.tistory.com/attachment/cfile7.uf@2633EA4155A8E26C35F5E7.mp4" weidth="800" height="600" controls autoplay loop muted preload="auto"></video>

오른쪽위 HTML을 체크하고 태그를 넣고 확인하자.