HTML5 비디오 태그를 사용하면 웹 페이지에 비디오를 쉽게 추가 할 수 있습니다. 그러나 표면에 나타나는 것처럼 보이지만 비디오를 제작하고 실행하기 위해해야 할 일이 많이 있습니다. 이 자습서는 모든 최신 브라우저에서 동영상을 실행하는 HTML5로 페이지를 만드는 단계를 안내합니다.
- 나만의 HTML5 비디오 호스팅 vs. YouTube 사용
- 웹에서의 비디오 지원에 대한 간략한 개요
- 비디오 제작 및 편집
- Firefox 용 비디오를 Ogg로 변환하십시오
- Safari 용 비디오를 MP4로 변환하십시오
- Internet Explorer 용 비디오를 FLV로 변환
- 웹 페이지에 비디오 요소 추가
- JavaScript 및 Flash Player를 추가하여 Internet Explorer 작동
- 최대한 많은 브라우저에서 테스트 가능
나만의 HTML 5 비디오 호스팅 vs. YouTube 사용
YouTube는 훌륭한 사이트입니다. 따라서 비디오를 웹 페이지에 신속하게 삽입 할 수 있으며 일부 예외를 제외하면 해당 비디오를 실행하는 과정이 매우 원활합니다. YouTube에 비디오를 올리면 누구나 볼 수 있다는 확신을 가질 수 있습니다.
하지만 YouTube를 사용하여 동영상을 퍼가기 위해서는 몇 가지 단점이 있습니다.
YouTube의 대부분의 문제는 디자이너 측이 아니라 소비자 측에 있습니다.
- 느린 검색 및 색인 생성
- 서버 중단
- 임의로 (겉으로보기로) 제거되는 콘텐츠
- 콘텐츠가 너무 많습니다.
그러나 YouTube가 콘텐츠 개발자에게 나쁜 점도있는 이유는 다음과 같습니다.
- 동영상 최대 길이 10 분 (무료 계정 용)
- 불쌍한 업로드 성능
- YouTube는 동영상에 무제한 사용 권한을 부여합니다.
- 모든 YouTube 사용자는 동영상에 무제한 사용 권한을 부여받습니다.
HTML5 비디오는 YouTube를 통해 몇 가지 이점을 제공합니다.
동영상 용 HTML5를 사용하면 동영상을 볼 수있는 사람, 콘텐츠의 길이, 콘텐츠의 내용, 호스팅 위치 및 서버 실적을 제어 할 수 있습니다. 또한 HTML5 비디오는 최대한 많은 사람들이 볼 수있는 형식으로 비디오를 인코딩 할 수있는 기회를 제공합니다. 고객이 플러그인을 필요로하지 않거나 YouTube가 최신 버전을 출시 할 때까지 기다릴 필요가 없습니다.
물론, HTML5 비디오는 몇 가지 단점을 제공합니다.
여기에는 다음이 포함됩니다.
- 적어도 세 가지 코덱으로 비디오를 인코딩해야합니다.
- HTML5를 지원하지 않는 브라우저가 작동하도록하려면 JavaScript를 포함시켜야합니다.
- 서버가 동영상 호스팅의 대역폭 요구 사항을 처리 할 수 있어야합니다.
계속 읽기
02 중 10웹에서의 비디오 지원에 대한 간략한 개요
웹 페이지에 비디오를 추가하는 것은 오랫동안 어려운 과정이었습니다. 잘못 될 수있는 많은 것들이있었습니다.
- 먼저, 태그를 사용하여 페이지에 동영상을 퍼가십시오. 그러나 해당 태그 대신 다른 태그가 사용됩니다. 그리고 일부 브라우저는 어쨌든 잘 지원하지 못했습니다.
- 그래서 당신은 태그가 있지만 이전 버전의 브라우저는 지원하지 않으며 새로운 브라우저는 지원하기 쉽지 않습니다.
- 그럼 당신은 플래시를 생각해! 비디오를 FLV 파일로 인코딩하십시오. 그러나 Flash는 많은 모바일 장치에서 지원되지 않으며 Flash가 사용되는 방식에 관계없이 Flash를 싫어하는 사람들이 많습니다 (설문 조사에 참여한 25 %의 응답자가 Flash에 대해 어떤 식 으로든 Flash에 맞설 수 없다고 생각하는 방식을 묻는 질문).
- 따라서 YouTube와 같은 동영상 퍼가기 사이트에 동영상을 업로드하기로 결정했지만 YouTube에서 논의한 문제가 있습니다.
- 마지막으로 HTML5를 사용하기로 결정했지만 Internet Explorer는 Internet Explorer 9까지 지원하지 않습니다. 또한 지원하는 경우에도 두 가지 비디오 코덱 표준이 지원되며 둘 다 사용할 수있는 브라우저는 하나뿐입니다. 비디오 코덱 및 컨테이너에 대한 브라우저 지원
그럼 어떻게해야 하죠? 비디오 포기는 더 이상 비디오가 점점 더 중요 해짐에 따라 대부분의 사이트에서 옵션이 아닙니다. 많은 사이트가 성공적으로 동영상으로 전환되었습니다.
이 기사의 다음 페이지에서는 Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 및 4, iPhone 및 Android, Flash 및 Internet Explorer 7 및 8에서 작동하는 웹 페이지에 비디오를 추가하는 방법을 단계별로 설명합니다. 필요한 경우 다른 구형 브라우저에 대한 지원을 추가하는 데 필요한 키가 있습니다.
계속 읽기
03 / 10비디오 제작 및 편집
비디오를 웹 페이지에 올릴 때 가장 먼저 필요한 것은 실제 비디오입니다. 계속해서 촬영하고 나중에 편집하여 기능을 만들거나 스크립트를 작성하고 미리 계획 할 수 있습니다. 어느 쪽이든 잘 작동하고, 당신이 편안하든간에 상관 없습니다. 어떤 유형의 비디오를 사용해야할지 모르는 경우 Desktop Video Guide에서 다음 아이디어를 확인하십시오.
- 가족 비디오 프로젝트
- 마케팅 및 프로모션 동영상
- 비디오 가상 투어
- 비디오 방법
- 웨딩 비디오
고화질 비디오 녹화 방법 배우기
실내 및 실외에서의 녹음 방법과 오디오 녹음 방법을 알고 있는지 확인하십시오. 조명은 또한 매우 중요합니다. 너무 밝아서 눈을 다치게하고, 너무 어둡게하면 흐릿하고 전문가가 아닌 것처럼 보입니다. 귀하의 사이트에 30 초짜리 비디오를 제작할 계획이라 할지라도 고품질 일수록 귀하의 웹 사이트에 반영되는 것이 좋습니다.
비디오에서 사용하고 싶은 소리 나 음악 (재고 영상물)에도 저작권이 적용된다는 사실을 기억하십시오. 노래를 쓰고 연주 할 수있는 친구에게 액세스 권한이없는 경우 백그라운드에서 재생할 무료 음악을 찾아야합니다. 또한 동영상에 추가 할 수있는 장면을 저장할 수있는 장소가 있습니다.
비디오 편집하기
당신이 익숙하고 효과적으로 사용할 수있는 한 당신이 사용하는 편집 소프트웨어는 중요하지 않습니다. Gretchen, Desktop Video Guide에는 전문적인 비디오 편집 팁이있어 비디오를 멋지게 편집 할 수 있습니다.
MOV 또는 AVI (또는 MPG, CD, DV)에 비디오 저장
이 튜토리얼의 나머지 부분에서는 AVI 또는 MOV와 같은 고품질 (비 압축) 형식의 비디오를 저장한다고 가정합니다. 이러한 파일을 그대로 사용할 수는 있지만 이미 논의한 비디오의 모든 문제가 발생합니다. 다음 페이지에서는 파일을 세 가지 유형으로 변환하여 가장 많은 수의 브라우저에서 볼 수있는 방법을 설명합니다.
04 중 10Firefox 용 비디오를 Ogg로 변환하십시오
우리가 변환 할 첫 번째 형식은 Ogg입니다 (때로 Ogg-Theora라고도 함). 이 형식은 Firefox 3.5, Opera 10.5 및 Chrome 3에서 모두 볼 수있는 형식입니다.
불행히도 Ogg는 브라우저를 지원하지만, 구입할 수있는 잘 알려진 비디오 프로그램 (Adobe Media Encoder, QuickTime 등)은 대부분 Ogg 변환 옵션을 제공하지 않습니다. 따라서 비디오를 Ogg로 변환하는 유일한 방법은 웹에서 변환 프로그램을 찾는 것입니다.
변환 옵션
다양한 형식의 비디오 (및 오디오)를 다른 비디오 (및 오디오) 형식으로 변환한다고 주장하는 Media-Convert라는 온라인 도구가 있습니다. 3 초 테스트 비디오를 사용해 보았을 때, Mac에서 작동하지 못했습니다. 하지만 운이 좋을지도 몰라. 이 사이트는 무료라는 이점이 있습니다.
우리가 발견 한 다른 도구는 다음과 같습니다.
- Miro Video Converter (Windows Macintosh) -이 프로그램은 Ogg 및 MP4 (H.264)로 변환 할 수있는 이점이 있으며 오픈 소스입니다.
- 코요테 비디오 컨버터 (Windows)
- 무료 비디오 변환기 우리는 이것이 Windows와 Macintosh 버전을 모두 가지고 있다고 생각하지만, 그들의 사이트에서 말하기는 어려웠습니다.
- 간단한 Theora Encoder (매킨토시) - 이것은 우리가 사용하는 경향이있는 것입니다.
비디오를 Ogg 형식으로 저장 한 후에는 웹 사이트의 위치에 저장하고 다음 페이지로 이동하여 다른 브라우저의 다른 형식으로 변환하십시오.
계속 읽기
05 중 10Safari 용 비디오를 MP4로 변환하십시오
다음 형식으로 비디오를 변환해야하는 것은 MP4 (H.264 비디오)이므로 Safari 3 및 4와 iPhone 및 Android에서 재생할 수 있습니다. 또한 H.264 비디오를 Flash에서 감상하기 위해 FLV 파일로 쉽게 변환 할 수 있습니다.
이 형식은 상용 제품에서보다 쉽게 사용할 수 있으며 비디오 편집기가있는 경우 이미 MP4로 변환 할 프로그램이있을 것입니다. Adobe Premiere를 사용하는 경우 Adobe Video Encoder를 사용할 수도 있고 QuickTime Pro를 사용할 수도 있습니다. 이전 페이지에서 논의한 많은 변환기는 비디오를 MP4로 변환합니다.
- MediaConvert - 온라인 AWS 도구입니다.
- Miro Video Converter (Windows Macintosh) -이 프로그램은 Ogg 및 MP4 (H.264)로 변환 할 수있는 이점이 있으며 오픈 소스입니다.
- SUPER (Windows) - 다양한 파일 형식을 MP4 및 FLV로 변환합니다.
- 무료 비디오 변환기 우리는 이것이 Windows와 Macintosh 버전을 모두 가지고 있다고 생각하지만 그들의 사이트에서 말하기는 어려웠습니다.
MP4 파일을 웹 사이트에 저장 한 다음 Internet Explorer에서 Flash로 변환해야 사용할 수 있습니다.
06 중 10Internet Explorer 용 비디오를 FLV로 변환
비디오를 FLV로 변환하는 가장 쉬운 방법은 Flash 자체를 사용하는 것입니다. 이것이 우리가 내 비디오를 플래시로 변환하는 방법입니다. 그러나 플래시가없는 경우 파일을 FLV로 변환하는 두 가지 인기있는 도구가 있습니다.
- SUPER (Windows) - 다양한 파일 형식을 MP4 및 FLV로 변환합니다.
- ffmpegX (Macintosh) - 다양한 파일 형식을 Mp4 및 FLV로 변환합니다.
FLV 파일을 웹 사이트에 저장하면 다음 페이지에서 동영상을 재생할 수 있도록 HTML을 작성하는 방법을 보여줍니다.
계속 읽기
07 중 10웹 페이지에 비디오 요소 추가
HTML 5를 사용하여 웹 페이지에 비디오를 추가하는 것은 매우 쉽습니다. 대부분의 최신 브라우저는 HTML 5 비디오를 지원하지만 모두 동일한 방식으로 지원하지는 않습니다. 그러나 이것이 의미하는 바는 Ogg 및 MP4 형식으로 비디오를 저장하면 대부분의 최신 브라우저 (Internet Explorer 8 제외)에 표시되도록 4 ~ 5 줄의 HTML 만 작성할 수 있다는 것입니다. 방법은 다음과 같습니다.
브라우저가 HTML 5를 기대할 수 있도록 HTML 5 doctype 표식을 작성하십시오.
- 일반적으로 웹 페이지를 만듭니다.
- 몸 안쪽에
- 비디오에서 원하는 특성을 결정하십시오. 컨트롤 및 미리로드를 사용하는 것이 좋습니다. 비디오의 첫 장면이 좋지 않은 경우 포스터 옵션을 사용하십시오.
- 자동 재생 - 다운로드하자마자 시작됩니다.
- 컨트롤 - 독자가 비디오를 제어 할 수 있습니다 (일시 중지, 되감기, 빨리 감기).
- 루프 - 끝날 때 비디오를 처음부터 시작합니다.
- 사전로드 - 고객이 비디오를 클릭 할 때 더 빨리 준비 할 수 있도록 비디오를 미리 다운로드하십시오.
- 포스터 - 비디오가 중단되었을 때 사용할 이미지를 정의하십시오.
- 그런 다음 두 버전의 비디오 (MP4 및 OGG)에 대한 소스 파일을
- Chrome 1, Firefox 3.5, Opera 10 및 / 또는 Safari 4에서 페이지를 열고 제대로 표시되는지 확인하십시오. Firefox 3.5와 Safari 4에서 각각 다른 코덱을 사용하므로 테스트해야합니다.
그게 전부 야. 이 코드를 설치하면 Firefox 3.5, Safari 4, Opera 10 및 Chrome 1에서 작동하는 비디오가 제공됩니다. 그러나 Internet Explorer는 어떻게됩니까?
Internet Explorer는 HTML 5 또는
다음 섹션에서는 Internet Explorer 8이 HTML 5 비디오 태그를 멋지게 재생하고 비디오를 표시하도록하기 위해 수행 할 수있는 작업에 대해 설명합니다. 플래시를 사용해야합니다.좋은 소식은 IE 9가 HTML 5와 비디오 태그를 지원할 것으로 예상된다는 것입니다.
08 중 10JavaScript 및 Flash Player를 추가하여 Internet Explorer 작동
이전 페이지의 HTML에서 FLV 파일의 소스 행이 없음을 알았을 수 있습니다. Internet Explorer에서 해당 페이지를 테스트하면 작동하지 않습니다. Internet Explorer는 HTML 5를 인식하지 못하기 때문에 OGG 또는 MP4 비디오를 기본적으로 재생할 수 없기 때문입니다. Internet Explorer 7과 8을 작동 시키려면 비디오를 Flash로 재생해야합니다. 그러나 FLV 파일을 추가하는 것보다 작동시키기위한 더 많은 단계가 있습니다.
1 단계 : 귀하의 웹 사이트에 플래시 비디오 플레이어 가져 오기
FlowPlayer는 웹 서버에 설치하여 재생할 Flash 비디오가있을 때마다 사용할 수있는 오픈 소스 Flash 비디오 플레이어이므로 FlowPlayer를 설치하는 것이 좋습니다. 무료 버전의 FlowPlayer는 동영상에 광고를 삽입하지만 필요한 경우 상용 라이센스를 구매할 수도 있습니다.
FlowPlayer 사이트의 지침에 따라 웹 사이트에 FlowPlayer를 설치하십시오. 간단히 말해, 사이트에 2 개의 SWF 파일과 JavaScript 파일을 설치하게됩니다. HTML의 맨 아래 ( 태그)를 추가합니다.
그러나 Internet Explorer는 여전히 동영상을 재생하지 않으므로 HTML 5 태그를 인식하는 방법을 가르쳐야합니다.
2 단계 : Internet Explorer에서 HTML 5 태그를 읽도록 유도
IE에서 HTML 5 요소를 인식하는 데 도움이되는 "HTML Shiv"라는 Google 코드에 편리한 스크립트가 있습니다. 그래서
HTML 문서를 참조 할 수 있습니다. 다른 브라우저에서 혼동하지 않도록 IE 조건부 주석에 동봉하는 것이 가장 좋습니다.
자, 이제 IE는
