웹페이지에 동영상을 삽입 했는데.. controls 속성이 정상적으로 작동하지 않아서 그 이유를 찾아 봤다. autoplay 등 기타 다른 속성들은 잘 작동하는데.. 이상하게 controls 속성만 오류가 생긴다. 정보 찾기가 쉽지 않았는데.. 아마도 아래와 같은 이유때문인 듯한데.. 아직 확실하지는 않다. (동영상을 다시 인코딩해 봐야 겠다. 인코딩할 때 파일형식과 코텍선택에 주의해야 겠다.)
HTML5 video 태그가 지원하는 비디오 포맷과 각 포맷의 비디오 코덱은 아래와 같다.
1)mp4:H.264/AVC, 2)webm:VP8/Vorbis, 3)ogv:Theora/Vorbis
*mp4 형식은 특허가 걸려 있어서 라이센스 비용을 지불해야 함으로 브라우져마다 지원유무가 다름.
*ogg 형식은 특허가 걸려있지 않은 무료.
즉 동영상 파일의 형식이 MP4, WEBM, OGV이고 코덱은 H.264/AVC, VORBIS, THEORA/VORBIS라는 거다.
위 형식의 동영상일 때 html5에서 자바스크립트나 기타 플러그인 없이 동영상이 웹페이지에서 플레이되는 것이다.
기존의 MP4 동영상 파일을 보니.. MP4/AVC1 형식의 파일이었다. 그래서 샤인인코더라는 인코딩프로그램을 설치하고 MP4/H264로 다시 인코딩하였다. 영상 사이즈변경: 용량을 줄이고자 1280x720을 640x320으로 변경했다.
*비디오퀄러티: 숫자가 낮을 수록 고화질. 보통 12~22 사이 선택. 25~28도 무관.
*리사이징 필터: lanczos나 bicubic spindle이나 별 차이 없음. 1080픽셀을 720픽셀로 줄이는 정도라면 bicubic이면 충분 4K양상을 1080픽셀, 720픽셀로 줄일때는 lanczos나 spline을 추천. 일반적인 경우라면 bicubic이 가장 무난.
*** 업데이트 ***
위의 모든 방법을 다 동원하고, 적용해 봤지만.. HTML5의 video 태그에서 controls 속성이 먹지를 않는다. ㅠㅠ 대체 이유가 뭔지 모르겠다. 브라우져도 최신버젼으로 video태그 지원하고 동영상도 인코딩 다시 했는데.. 왜 안돼는겨~~~~??
*** 추가 업데이트 ***
아.. 드디어 알아냈다.^^ 이유를 찾아내는데..꼬박 하루가 걸렸다.ㅜㅜ video 태그를 블럭테인데.. 이 video태그를 float시킨 div태그 안에 넣었기 때문이다. (따라서 video태그가 div태그 보다 우선 순위에 밀려 vidoe태그가 div태그 보다 하위 순위에 있게됨으로써 video태그의 controls 속성만 작동하지 않은 것이다.) 그렇다면 video태그를 품고 있는 div태그 보다 video태그에 우선 순위를 부여하여 엘리먼트 중에서 가장 상위에 존재하게 하면 문제가 해결된다.
여러 요소 중에.. 특정 엘리먼트 요소에 우선 순위를 부여하는 태그는 z-index태그이다. 문법은 다음과 같다: "z-index: 숫자;" ex: video { z-index:1; } *숫자가 낮을 수록 우선 순위를 갖고.. 1-99999까지 혹은 그 이상 줄 수 있다.
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/hh924820(v=vs.85)
https://webdir.tistory.com/95
https://positivemh.tistory.com/11
No comments:
Post a Comment