html5 video

1. Html5 Video
Lee Sang Hun

2. 이번 자료는 를 토대로 작성하였음을 알립니다.
더 자세한 사항은 아래 링크를 참고하시면 좋을 것 같습니다.
http://www.webcreatorbox.com/tech/video-background/
들어가기에 앞서..

3. 동영상을 배경으로 하는 웹사이트
• http://www.dadaabstories.org/
• https://www.dottegi.com/
• 영상을 통해 사이트의 비전, 목적등을 한눈에 확인 할 수 있다.

4. 고려해야할점
동영상의 길이
음악꺼짐
가능한 파일은 가볍게
대체 이미지 준비
모바일 장치 지원
또 어떤게 있을까?
오랫동안 영상을 안본다.
파일 용량이 커진다.
반대로 너무 짧으면 항상 반복하고있는
데 재촉하는것 같다.
여러사이트를 본 후, 25초 정도가 적당
할듯….

5. 고려해야할점
동영상의 길이
음악꺼짐
가능한 파일은 가볍게
대체 이미지 준비
모바일 장치 지원
또 어떤게 있을까?
조용한 곳에서 사이트를 접속했는데 큰
소리가 나면 노매너…

6. 고려해야할점
동영상의 길이
음악꺼짐
가능한 파일은 가볍게
대체 이미지 준비
모바일 장치 지원
또 어떤게 있을까?
고화질> 퀄리티가 너무 좋은 파일이면
속도문제 때문에 불편하다.
화질이 안좋은 것을 사용한다음 예쁘게
보이게 편집하는 방법을 이용하면 될 것
같다.(3MB이하정도..)

7. 고려해야할점
동영상의 길이
음악꺼짐
가능한 파일은 가볍게
대체 이미지 준비
모바일 장치 지원
또 어떤게 있을까?
Video 태그는 브라우저마다 지원하는
형식, 코덱이 제각각이다.
정지영상이나 이미지로 대처를 해야할
것이다.

8. 고려해야할점
동영상의 길이
음악꺼짐
가능한 파일은 가볍게
대체 이미지 준비
모바일 장치 지원
또 어떤게 있을까?
안그래도 동영상때문에 로딩시간이 길
어지는데 모바일이나 태블릿에서도 심
각하다…
정지화면이나 대체이미지 준비해야할
것같다.

10. H.264/AVC
H.264라고도 하며 mp4파일, mov파일에 많이 사용.
Ogg Theora
오그 테오라 라고하며 ogv파일에 사용되는 코덱.
WebM
최근 구글이 오픈소스로 공개한 코덱.
Webm파일에서 사용.

11. 유마일 인코더다음팟 인코더
인코더 프로그램을 통해 영상을 편집하여 형식과 코덱을 맞추면
브라우저에 영상이 나오는 것을 확인할 수 있었다.