요약

이 기사에서는 HTML5에 대한 핵심 요점과 웹 개발 환경에서 미디어에 미치는 영향에 대해 논의 할 것입니다. HTML5는 HTML 사양의 최신 버전이며 웹에 중대한 변경 사항과 향상을 제공합니다. 브라우저 플러그인없이 미디어를 재생하는 표준 방법을 제공합니다. 그러나 HTML5는 여전히 진행중인 작업이며 그 기능에 대한 브라우저 지원이 다를 수 있습니다.

키 포인트:

HTML5는 1999 년부터 HTML 사양의 첫 번째 새 버전입니다.
HTML5는 HTML, XHTML 및 HTML DOM의 새로운 표준이 될 것입니다.
HTML5는 브라우저 플러그인없이 미디어를 재생하는 표준 방법을 제공합니다.
대부분의 최신 브라우저에는 어느 정도의 HTML5 태그 지원이 있습니다.
html5는 미디어를 플레이하기위한 플래시 대안입니다.
HTML5 비디오 태그는 비디오 재생에 대한 표준화 된 접근 방식을 제공합니다.
HTML5는 AAC, MP3, Ogg Vorbis, Ogg Theora, Webm 및 MPEG-4를 포함한 다양한 미디어 형식을 지원합니다.
미디어 형식에 대한 브라우저 지원은 다를 수 있습니다.
HTML5의 비디오 태그를 사용하면 사용자 정의 가능한 재생 컨트롤이 가능합니다.
비디오 태그는 자동 재생, 루프 및 포스터와 같은 속성을 지원합니다.

질문과 답변

Q : HTML5 란 무엇입니까??

HTML5는 웹 개발에 새로운 기능과 향상을 제공하는 최신 HTML 사양입니다.

Q : 미디어를 플레이 할 때 HTML5의 중요성은 무엇입니까??

HTML5는 브라우저 플러그인이 필요없이 미디어를 재생하는 표준적인 방법을 제공하므로 다양한 플랫폼에서보다 액세스 가능하고 일관성이 있습니다.

Q : html5 비디오 태그는 미디어 재생을위한 객체 태그와 어떻게 다른가??

HTML5 비디오 태그는 비디오를 재생하기위한 표준화 된 접근 방식으로 특정 플러그인의 필요없이 브라우저의 호환성을 보장합니다.

Q : HTML5의 지원되는 미디어 형식은 무엇입니까??

HTML5는 AAC, MP3, Ogg Vorbis, Ogg Theora, Webm 및 MPEG-4를 지원합니다.

Q : 모든 브라우저가 모든 HTML5 미디어 형식을 지원합니까??

아니요, 미디어 형식에 대한 브라우저 지원은 다를 수 있습니다. HTML5 응용 프로그램을 개발할 때 미디어 형식의 호환성을 고려하는 것이 중요합니다.

Q : HTML5에서 비디오 태그 사용의 이점은 무엇입니까??

HTML5의 비디오 태그는 사용자 정의 가능한 재생 컨트롤을 허용하고 다양한 브라우저에서 비디오 재생 방법을 제공합니다.

Q : 비디오 태그와 함께 사용할 수있는 속성?

비디오 태그는 자동 재생, 루프, 컨트롤, 높이 및 예압과 같은 속성을 지원합니다.

Q : HTML5 페이지에서 비디오 태그를 어떻게 사용할 수 있습니까??

HTML5 페이지에서 비디오를 재생하려면 비디오 태그를 사용하고 소스 속성을 설정하여 재생할 비디오 파일을 지정하십시오.

Q : 브라우저에서 HTML5 구현의 현재 상태는 무엇입니까??

대부분의 최신 브라우저는 HTML5 기능을 지원합니다. 그러나 특정 HTML5 태그 및 기능을 사용할 때 브라우저 호환성을 고려하는 것이 중요합니다.

Q : HTML5는 플래시 대체입니다?

HTML5는 미디어를 플레이하기위한 플래시 대안을 제공하지만 완전히 대체되지는 않습니다. Flash는 여전히 더 넓은 브라우저 지원을 가지고 있으며 추가 기능을 제공합니다.

Windows 10 용 HTML 5 다운로드 – 최고의 소프트웨어 및 앱

HTML 또는 JavaScript에서 속성을 설정할 수 있습니다. 다음 코드는 HTML 및 JavaScript에서 부울 컨트롤 속성을 설정하는 방법을 보여줍니다.

HTML5- HTML5에서 미디어 작업

지난 1 년 동안 외딴 섬에 살지 않았다면 html5 주변의 화제와 과대 광고를 들었을 것입니다. 아니요, HTML5는 대부분의 질병을 치료하지 않으며 세계의 기아를 끝내지 않지만 풍부한 인터넷 애플리케이션 환경을 재구성 할 준비가되어 있습니다. 새로운 HTML 표준에 대한 모든 과대 광고로 토론을 다시 지구로 가져 오는 것이 중요합니다. 이 새로운 HTML 사양에 대해 알아야 할 중요한 사실은 다음과 같습니다

HTML5는 1999 년 이후 첫 번째 새 버전의 사양입니다. 웹은 그 이후로 많이 변경되었습니다.
HTML5는 HTML, XHTML 및 HTML DOM의 새로운 표준이 될 것입니다.
HTML5는 미디어를 재생하는 표준 방법을 제공합니다. 브라우저 플러그인이없는 웹 페이지에서 미디어를 재생할 수있는 표준이 없었기 때문에 모든 브라우저가 플러그인을 지원할 것이라는 보장은 없습니다.
HTML5는 여전히 진행중인 작업이지만 대부분의 최신 브라우저에는 HTML5 태그 지원이 있습니다.

Silverlight 1 일 때.2007 년에 배송 된 Microsoft는 비디오 및 오디오 재생을 기본 기능으로 선전했으며 Silverlight가 플래시 대안으로 보는 주요 이유입니다. 이 글을 쓰는 시점에서 Silverlight는 전세계 브라우저의 약 75 % 또는 4 개의 컴퓨터 중 약 3 개에서 지원됩니다. 하지만 당신이라면’미디어를 재생하려고합니다’T 플러그인의 번거 로움 또는 종속성을 원한다면 HTML5는 답입니다.

HTML5 비디오 태그 사용과 기존 객체 태그를 사용하여 미디어를 재생하는 것의 차이점을 보려면 예제를 고려하십시오 그림 1.

그림 1 HTML 비디오 태그 대. 미디어를 재생하는 객체 태그

 HTML5 비디오 태그를 사용하여 비디오를 재생합니다
 
 플래시 플러그인을 사용하여 객체 태그를 사용하여 미디어를 재생

그래서 뭐’큰 거래입니다? 두 예 모두 간단하고 구현하기 쉽습니다. 그러나 여기서 중요한 점은 태그가 표준이기 때문에 미디어를 재생하는 데 사용되어야한다는 데는 의문의 여지가 없다는 것입니다. 당신은 돈입니다’t 브라우저에 미디어를 재생하도록 설치된 특정 버전의 특정 버전이 있는지 추측해야합니다. 표준 부분은 무엇입니다’HTML에서 누락되었습니다.

HTML5에서 지원되는 미디어 형식

다음 HTML5 응용 프로그램에서 미디어를 사용하려면 지원되는 형식을 알아야합니다. HTML5는 AAC, MP3 및 OGG VORBIS를 지원하며 OGG Theora, Webm 및 MPEG-4는 비디오를 지원합니다.

그러나 HTML5가 이러한 미디어 형식을 지원하더라도 모든 브라우저가 모든 형식을 지원하는 것은 아닙니다. 그림 2 현재 브라우저와 그들이 지원하는 미디어 형식을 보여줍니다.

그림 2 현재 브라우저의 미디어 지원

브라우저	비디오 형식			오디오 형식
오그 테오라	시간.264	vp8 (웹)	OGG VORBIS	MP3	wav
인터넷 익스플로러	수동 설치	9.0	수동 설치	아니요	예	아니요
모질라 파이어 폭스	삼.5	아니요	4.0	예	아니요	예
구글 크롬	삼.0	아니요	6.0	예	예	예
원정 여행	수동 설치	삼	수동 설치	아니요	예	예
오페라	10.50	아니요	10.60	예	아니요	예

비디오 태그 사용

HTML5 페이지에서 비디오를 재생하려면 여기에 표시된대로 태그를 사용하십시오

SRC 속성 (https : // www.W3.ORG/TR/2013/CR-HTML5-20130806/Embedded-Content-0.html#the-video element) 비디오의 이름 또는 이름을 재생하고 제어합니다’S 부울 스위치는 기본 재생 컨트롤이 표시되는지 여부를 지시합니다. 비디오 태그를 설정할 때 두 가지 다른 부울 속성 (자극 및 루프)을 사용할 수도 있습니다. 그림 3 각 속성 속성과 그 값을 나열합니다.

그림 3 비디오 태그 속성

기인하다	값	설명
오디오	음소거	오디오의 기본 상태를 정의합니다. 현재는 Muted 만 허용됩니다.
자동 재생	자동 재생	존재한다면 비디오가 곧 재생을 시작합니다’준비.
통제 수단	통제 수단	재생, 일시 정지 및 볼륨 컨트롤을 추가합니다.
키	픽셀	비디오 플레이어의 높이를 설정합니다.
고리	고리	참석하면 비디오가 끝날 때마다 다시 시작됩니다.
포스터	URL	비디오를 나타내는 이미지의 URL을 지정합니다.
예압	예압	존재하면 비디오가 페이지로드로로드되어 실행할 준비가되었습니다. 자동 재생이있는 경우 무시됩니다.
SRC	URL	재생할 비디오의 URL.
너비	픽셀	비디오 플레이어의 너비를 설정합니다.

다음 코드는 높이 및 너비 설정, 자동 재생, 루프 및 제어 속성을 포함하는 일반적인 시나리오에서 비디오 플레이어의 몇 가지 주요 속성을 보여줍니다.

소스 요소에서 유형 속성과 코덱을 사용하는 특정 Mime 유형을 설정할 수도 있습니다. 이 예제는 유형 속성을 사용하여 MIME 유형을 설정하고 미디어의 인코딩을 설정합니다

HTML 또는 JavaScript에서 속성을 설정할 수 있습니다. 다음 코드는 HTML 및 JavaScript에서 부울 컨트롤 속성을 설정하는 방법을 보여줍니다.

    // JavaScript 비디오에서 컨트롤을 표시하는 두 가지 방법.컨트롤 = true; 동영상.setAttribute ( 'Controls', 'Controls');

당신이 할 때’브라우저가 페이지를 렌더링할지 여부를 알면 미디어를 재생할 폴백 메커니즘이 필요합니다. 당신이하는 모든 것은 당신이 당신의 비디오를 렌더링 한 비디오 형식을 나열하고, 브라우저는 그것이 지원하는 첫 번째 형식을 재생합니다. 또한 최후의 수단으로 텍스트를 추가하여 사용자에게 사용중인 브라우저가’T 기본 HTML5 비디오 재생을 지원합니다. 다음 코드에는 여러 비디오 소스와 HTML5 지원이없는 폴백 메시지가 포함됩니다.

비디오가 재생되는지 확인하려면 객체 태그를 포함하여 플래시 버전을 재생할 수 있습니다

또한 JavaScript를 사용하여 CanplayType 속성을 확인하여 비디오 형식이 지원되는지 확인할 수도 있습니다

var video = 문서.getElementsByTagName ( '비디오') [0]; if (비디오.CanplayType) < // video tag supported if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) < // it may be able to play>또 다른 >

간단한 폴백 텍스트보다 표현력있는 일을하려면 OnError 이벤트 리스너를 사용하여 오류를 전달할 수 있습니다

포스터 속성을 사용하면 형식에 비디오 대신 표시 할 이미지의 URL을 지정할 수 있습니다. 보통 당신’형식에 비디오 목록 또는 단일 비디오를 표시하므로 이미지 형식으로 비디오 미리보기를 쉽게 표시 할 수있는 방법이 더 나은 사용자 경험을 제공합니다. 다음은 행동중인 포스터 속성입니다

마지막으로 약간의 JavaScript 및 기본 HTML을 사용하면보다 대화 형 비디오 플레이어를 만들 수 있습니다. 그림 4 JavaScript가있는 양식에 비디오 플레이어를 추가하는 방법과 컨트롤에 사용자 입력에 응답하는 방법을 보여줍니다.

그림 4 JavaScript의 비디오와 상호 작용합니다

var video = 문서.CreateElement ( ‘비디오’); 동영상.src = ‘video1.MP4 ‘; 동영상.컨트롤 = true; 문서.몸.AppendChild (비디오); var video = 새로운 비디오 (); 동영상.src = ‘video1.MP4 ‘; var video = 새로운 비디오 ( ‘video1.MP4 ‘)

비디오 재생을위한 전체 이벤트 및 기능 목록은 https : // www에서 사양 의이 섹션을 확인하십시오.W3.org/tr/html-markup/video.HTML.

오디오 태그 사용

오디오 태그 사용은 비디오 태그 사용과 매우 유사합니다. 하나 이상의 오디오 파일을 제어에 전달하고 브라우저가 지원하는 첫 번째 오디오 파일이 재생됩니다.

그림 5 오디오 태그에 사용 가능한 속성을 나열합니다. 통제는 그렇지 않습니다’T 비디오 플레이어처럼 표시해야하므로 높이, 너비 및 포스터와 같은 속성이 포함되어 있지 않습니다.

그림 5 오디오 태그 속성

기인하다	값	설명
자동 재생	자동 재생	존재한다면 오디오가 곧 재생을 시작합니다’준비.
통제 수단	통제 수단	재생 버튼과 같은 컨트롤이 표시됩니다.
고리	고리	존재한다면 오디오가 다시 재생되기 시작합니다 (루핑).
예압	예압	존재하면 오디오가 페이지로드로로드되어 실행할 준비가되었습니다. 그것’AutoPLay가있는 경우 S가 무시됩니다.
SRC	URL	연주 할 오디오의 URL.

비디오 태그와 마찬가지로 여러 파일을 오디오 태그로 전달할 수 있으며 지원되는 첫 번째 파일은 재생됩니다. 브라우저가 할 때 폴백 메시지를 사용할 수도 있습니다’t 오디오 태그를 지원합니다

요약

HTML5는 웹의 다음 표준이며 브라우저에 따라’RE 타겟팅, 오디오 및 비디오와 같은 새로운 태그 중 일부를 사용하여 지금. 그러나 HTML5를 사용할 때는주의를 기울여야합니다. 그러나 모든 브라우저가 새 태그를 지원하는 것은 아니며, 모든 미디어 형식을 지원하지 않을 수도 있습니다. 만약 너라면’HTML5를 지원하는 최신 브라우저를 사용하면 사용자의 성공을 보장하기 위해 모든 형식으로 미디어를 처리하기 위해 추가 작업을 수행해야합니다. 다음은 브라우저 지원 정보를 제공하는 훌륭한 웹 리소스와 HTML5 미디어 성공을 보장하는 데 필요한 기타 모든 정보입니다

https : // www.W3.org/tr/html-markup/video.HTML
https : // dev.W3.org/html5/사양/개요.HTML
https : // www.W3Schools.com/html/html5_intro.ASP
https : // html5test.com/
https : // caniuse.com/

_제이슨 베레스 Infragistics 및 Spearheads의 제품 관리, 커뮤니티 및 전도 담당 부사장입니다. Jason은 Microsoft입니다 .NET MVP 및 The의 활발한 멤버입니다 .순 커뮤니티. 그는 매년 전 세계 수십 가지 행사 및 컨퍼런스에서 연설합니다. 그는 Visual Basic 및 C#에서 SQL Server 및 Silverlight에 이르는 주제에 관한 8 권의 책을 저자입니다. 그의 최신작은 Professional Silverlight 4 (Wrox, 2010)입니다. Jasonb@Infragistics에서 Jason에 도달 할 수 있습니다.com 또는 트위터 @jasonberes._