HTML5 비디오 및 오디오 : 마크 업 -Sitepoint

HTML5 비디오 및 오디오 태그에 대한 자세한 설명 : 반응 형 비디오 플레이어 구축 에 대한 자세한 설명 이 기사는 Alexis Goldstein, Louis Lazaris 및 Estelle Weyl이 공동 저술 한 "Real World, 2nd Edition, 2nd Edition"이라는 책에서 발췌 한 것입니다. 이 책은 전 세계 주요 서점에서 구입할 수 있으며 여기에서 전자 책 버전을 구입할 수도 있습니다.

코어 포인트

HTML5의 비디오 및 오디오 태그를 사용하면 외부 플러그인이나 플레이어가 필요하지 않고 HTML 코드로 직접 내장 된 비디오 및 오디오 요소를 허용합니다.

HTML5 비디오 및 오디오 태그에는 자동 재생, 컨트롤, 루프, 음소거 및 소스와 같은 이러한 요소의 동작을 제어하기위한 여러 속성이 포함되어 있습니다.

"html5 비디오 파일 찾기"오류는 일반적으로 브라우저가 비디오 태그의 소스 속성에 지정된 비디오 파일을 찾거나 액세스 할 수없는 경우에 발생합니다.
• html5 자체는 비디오 내장 주석 기능을 제공하지 않지만 JavaScript 및 CSS를 사용하여 사용자 정의 주석을 만들 수 있습니다.
비디오 태그에 여러 소스 태그를 포함시킴으로써 HTML5 비디오에 여러 소스를 지정하여 다른 브라우저와의 호환성을 최대화 할 수 있습니다.
• 태그 컨테이너, 코덱 및 라이센스 문제를 처리 한 후 비디오 요소 및 관련 속성의 표시를 연구 해 봅시다.
웹 페이지에 HTML5 비디오를 포함시키는 가장 쉬운 방법은 다음과 같습니다.
• 이전 섹션에서 언급했듯이 이것은 제한된 브라우저에서만 작동합니다. 그러나 이것은 HTML5 비디오가 어느 정도 작동하도록하는 가장 작은 코드입니다. 이상적인 세상에서는 IMG 요소와 같이 어디서나 작동해야하지만 시간이 걸릴 것입니다.
IMG 요소와 유사하게 비디오 요소는 폭과 높이 속성을 포함 할 수도 있습니다.
• 크기는 마커로 설정할 수 있지만 비디오의 종횡비에는 영향을 미치지 않습니다. 예를 들어, 이전 예제의 비디오가 실제로 375 × 240이고 마킹이 표시되면 비디오는 지정된 280 픽셀 공간 내에서 수직 중앙에 있습니다. 이로 인해 비디오가 과도하게 뿌려지고 왜곡되는 것처럼 보입니다.
너비와 높이 속성은 정수 만 허용하며 그 값은 항상 픽셀입니다. 물론 이러한 값은 스크립트 또는 CSS에 의해 덮어 쓸 수 있습니다.

기본 컨트롤을 활성화

모든 내장 비디오는 사용자가 플레이, 일시 정지, 중지, 빠른 전달 및 뒤로 또는 볼륨을 조정할 수 있도록 필수 불가결합니다. html5의 비디오 요소에는 다음을 수행 할 수있는 컨트롤 속성이 포함되어 있습니다.

컨트롤은 부울 속성이므로 값이 필요하지 않습니다. 태그에 포함 시키면 브라우저가 사용자가 컨트롤을 가시 및 액세스 할 수 있도록합니다.

각 브라우저는 내장 비디오 컨트롤의 모양을 담당합니다. 그림 5.1 및 그림 5.2는 브라우저 전체의 이러한 컨트롤의 외관 차이를 보여줍니다.

그림 5.1

그림 5.2

그림 5.3 그림 5.4 AutoPLay 속성 우리는이 속성을 무시하고 싶습니다. 그러나 대부분의 경우 바람직하지 않기 때문에 적절할 수 있습니다. 부울 AutoPlay 속성은 이름의 의미와 완전히 일치합니다. 웹 페이지에 가능한 빨리 비디오를 재생하도록 지시합니다.

일반적으로 이것은 나쁜 관행입니다. 우리 대부분은 웹 사이트가로드 될 때, 특히 스피커를 짜증나게 할 때 어떻게되는지 알고 있습니다. 유용성 모범 사례는 웹 페이지의 소리와 움직임이 사용자가 요청할 때만 트리거되어야한다고 규정합니다. 그렇다고해서 자동 재생 속성을 사용해서는 안된다는 의미는 아닙니다.

예를 들어, 관련 페이지에 비디오가 하나만 포함 된 경우, 즉 사용자는 특정 비디오를 보려면 페이지에 대한 링크를 클릭합니다. 그러면 비디오의 크기, 주변 콘텐츠에 따라 자동으로 재생할 수 있습니다. , 보는 플랫폼과 청중. 다음은이 속성을 사용하는 방법입니다

경고 : 모바일 브라우저는 autoplay를 무시합니다 많은 (전부가 아닌 경우) 모바일 브라우저는 자동 재생 속성을 무시하므로 사용자가 재생 버튼을 누른 후에는 비디오가 항상 재생됩니다. 모바일 대역폭이 일반적으로 제한적이고 비싸다는 점을 고려하면 합리적입니다.

루프 속성 사용하기 전에 두 번 생각해야 할 또 다른 사용 가능한 속성은 부울 루프 속성입니다. 다시 이해하기 쉽습니다. 사양에 따르면,이 속성은 브라우저에 "리소스의 시작 부분에 도달 할 때 리소스의 시작으로 돌아가도록 브라우저에 알려줍니다". 따라서 방문자가 지루하게하는 유일한 목적이있는 웹 페이지를 만들면 다음 코드가 포함될 수 있습니다.

자동 플레이와 무한 루프! 우리는 기본 컨트롤을 제거하면 최악의 실습 트리오를 얻을 수 있습니다.

물론 AutoPlay와 같이 루프는 일부 경우에도 유용합니다. 예를 들어, 브라우저 기반 게임에서는 페이지가 열리면 주변 사운드와 음악이 지속적으로 재생되어야합니다.

예압 속성

앞에서 논의한 두 속성과 비교하여, 예압 속성은 많은 경우에 매우 편리합니다. Preload 속성은 세 가지 값 중 하나를 수락합니다 :

Auto : 비디오가 재생되기 전에 비디오와 관련 메타 데이터가로드가 시작됨을 나타냅니다. 이렇게하면 사용자가 요청하면 브라우저가 비디오 재생을 더 빨리 재생할 수 있습니다.
• 없음 : 사용자가 재생 버튼을 누르기 전에 비디오를 백그라운드에로드해서는 안됩니다.
<:> 메타 데이터 : 없음과 비슷하지만 비디오 자체가로드되지 않더라도 비디오와 관련된 메타 데이터 (예 : 크기, 지속 시간 등)를 사전로드 할 수 있습니다.
예압 속성에는 생략 된 경우 기본값이 정의되지 않습니다. 이는 실제 부작용없이 비디오 및/또는 메타 데이터가 잘 연결된 데스크탑 브라우저에 자동으로 사전로드 될 수 있지만 많은 모바일 사용자가 제한된 대역폭을 가지고 있으며 선호하기 때문에 모바일 브라우저가 메타 데이터를 기본적으로 전달할 수 있기 때문입니다. 비디오를 다운로드할지 여부를 선택하십시오.
• 포스터 속성 웹에서 비디오를 보려고 할 때, 동영상의 단일 프레임이 일반적으로 컨텐츠의 트레일러를 제공하도록 표시됩니다. 포스터 속성을 사용하면 이러한 트레일러를 쉽게 선택할 수 있습니다. 이 속성은 SRC와 유사하며 URL을 통해 서버의 이미지 파일을 가리 킵니다.

포스터 속성이 생략되면 기본 "포스터"는 비디오의 첫 번째 프레임이되며로드 직후에 표시됩니다.

뮤지드 속성

Muted Attribute (부울 유형) 비디오 요소의 오디오 트랙의 기본 상태를 제어합니다.

이 속성을 추가하면 비디오의 오디오 트랙이 기본적으로 음소거되게되며, 이는 모든 사용자 기본 설정을 덮어 쓸 수 있습니다. 이는 요소의 기본 상태 만 제어합니다.이 상태는 사용자가 컨트롤 또는 JavaScript와 상호 작용하여 변경할 수 있습니다.

비디오 요소에 추가하십시오 :

이전 버전의 HTML5 사양에는 오디오라는 속성이 있었는데, 이는 값을 음소거했습니다. 새로운 음소거 속성은 현재 구식 오디오 속성을 대체합니다.

여러 비디오 형식에 대한 지원 추가 우리가 논의한 바와 같이, 현재 비디오를 제공하기 위해 단일 컨테이너 형식을 사용하는 방법은 없지만, 이것은 실제로 비디오 요소의 배후에있는 철학이며 가까운 시일 내에 달성하기를 희망합니다. 여러 비디오 형식을 포함시키기 위해 비디오 요소는 소스 요소의 정의를 허용하므로 각 브라우저가 선택한 형식으로 비디오를 표시 할 수 있습니다. 이러한 요소는 비디오 요소의 SRC 속성과 동일한 기능을 갖기 때문에 소스 요소를 제공하는 경우 비디오 요소에 SRC를 지정할 필요가 없습니다. 전체 브라우저 지원을 달성하려면 소스 요소를 선언하는 방법은 다음과 같습니다.

<code class="language-html"><video src="example.webm"></video></code>

소스 요소 (이상하게도)에는 비디오 파일의 위치를 ​​지정하는 SRC 속성이 있습니다. 또한 요청 된 자원의 컨테이너 형식을 지정하는 유형 속성을 허용합니다. 이 후속 속성을 사용하면 브라우저가 관련 파일을 재생할 수 있는지 여부를 결정하여 불필요하게 지원되지 않는 형식을 다운로드하지 못하게합니다.

유형 속성을 사용하면 요청 된 파일의 비디오 및 오디오 코덱을 정의하는 코덱 매개 변수를 지정할 수 있습니다. 다음은 지정된 코덱의 소스 요소입니다.

<code class="language-html"><video src="example.webm"></video></code>

유형 속성의 구문이 컨테이너와 코덱 값에 맞게 약간 수정되었음을 알 수 있습니다. 값 주위에 사용 된 이중 따옴표는 단일 따옴표로 변경되었으며 다른 중첩 된 이중 따옴표 세트는 코덱에서 구체적으로 사용됩니다.

이것은 언뜻보기에 약간 혼란 스러울 수 있지만 대부분의 경우 비디오를 인코딩하는 방법이 있으면 (이 장의 뒷부분에서 논의하겠습니다) 값을 복사하여 붙여 넣습니다. 브라우저가 재생할 수있는 파일을 결정할 수 있도록 지정된 파일의 올바른 값을 정의하는 것이 중요합니다.

참고 : 어떤 형식이 필요합니까?

웹 사이트의 대상 고객에 따라 전체 브라우저 지원을 받으려면 세 가지 소스 요소가 필요하지 않을 수 있습니다. 비디오 및 오디오 코덱 및 컨테이너를 지원하는 것은 훌륭합니다. 하나 또는 두 개의 조합 만 있으면됩니다. 사용할 형식을 결정하는 데 도움이 되려면 사용할 수있는 최신 브라우저 지원 정보를 확인하십시오.

소스 순서 세 가지 소스 요소는 비디오 요소의 하위 요소로 배치되며 사용 된 브라우저는 인식하는 컨테이너/코덱 형식을 선택합니다. 필요한 리소스 만 다운로드하고 다른 리소스를 무시합니다. 세 가지 파일 형식을 선언 한 후 이제 코드가 다음과 같습니다.

당신은 이제 우리 코드에 비디오 요소에 SRC 속성이 없음을 알 수 있습니다. 앞에서 언급했듯이 중복성 외에도 IT를 포함하여 소스 요소에 정의 된 모든 비디오 파일을 덮어 쓰 므로이 경우 생략해야합니다.

HTML5 비디오를 지원하지 않는 브라우저가 있으면 어떻게해야합니까?

비디오 요소에 포함 된 세 가지 소스 요소는 모든 최신 브라우저를 다루지 만 아직 비디오가 이전 브라우저에서 재생되도록 보장하지 않았습니다. 앞에서 언급했듯이 여전히 HTML5 비디오를 지원하지 않는 브라우저를 사용하는 상당수의 사용자가있을 수 있습니다. 이 사용자의 대부분은 Internet Explorer 9 이전의 특정 버전에 있습니다.

우아한 다운 그레이드의 원리를 유지하기 위해 비디오 요소는 이전 브라우저가 다른 방식으로 비디오에 액세스 할 수 있도록 설계되었습니다. 비디오 요소를 인식하지 못하는 모든 브라우저는 단순히 소스 하위 요소를 무시합니다. 그러나 비디오 요소에 브라우저가 유효한 HTML로 인식되는 컨텐츠가 포함되어 있으면 컨텐츠를 읽고 표시합니다.

지원되지 않는 브라우저에 무엇을 제공 할 수 있습니까? Adobe에 따르면 10 억 명이 넘는 데스크탑 사용자가 시스템에 Flash Player 플러그인을 설치했습니다. 이러한 플래시 플러그인 인스턴스의 대부분은 버전 9 이상이며 MPEG-4 비디오 컨테이너 형식을 지원합니다. 이를 염두에두고 Internet Explorer 8 이상 (및 HTML5 비디오를 지원하지 않는 기타 이전 브라우저)에서 비디오를 재생할 수 있도록 내장 플래시 비디오를 폴백으로 선언 할 수 있습니다. 다음은 플래시 폴백 코드가 포함 된 html5 herald

의 비디오에 대한 전체 코드입니다.

우리는 새로 추가 된이 코드가 어떻게 작동하는지 자세히 살펴볼 것입니다 (결국 플래시에 관한 책이 아닙니다!). 그러나이 태그를 추가하는 데 주목해야 할 몇 가지 사항이 있습니다.

객체 요소의 너비 및 높이 속성은 비디오 요소의 너비와 동일해야합니다.
• 파일을 재생하려면 Longtail Video의 오픈 소스 JW 플레이어를 사용합니다.이 플레이어는 비상업적으로 무료로 사용되지만 원하는 비디오 플레이어를 사용할 수 있습니다.
플래시 비디오 코드에는 자체 백업이 있습니다. 플래시 비디오 코드가 작동하지 않으면 이미지 파일이 표시됩니다.
• 네 번째 매개 변수 요소는 사용할 파일을 정의합니다 (example.mp4). 앞에서 언급했듯이 대부분의 Flash Player 인스턴스는 이제 MPEG-4 컨테이너 형식을 사용하여 비디오 재생을 지원하므로 다른 비디오 형식을 인코딩 할 필요가 없습니다.
HTML5 비디오를 지원하는 HTM5 활성화 된 브라우저는 사양에서 지정된 소스 태그가 아닌 비디오 요소의 컨텐츠를 무시하므로 모든 브라우저에서 폴백이 안전합니다.
플래시 폴백 컨텐츠 외에도 사용자가 비디오의 로컬 사본에 액세스하고 무료 일 때 시청할 수있는 선택적인 다운로드 비디오 링크를 제공 할 수도 있습니다. 이렇게하면 아무도 비디오를 볼 수 없습니다.
• 여기에서 언급해야 할 마지막 요점은 추가 소스 요소와 마찬가지로 귀하의 웹 사이트에는 지원되지 않는 HTML5 비디오 브라우저의 방문자가 없거나 이전 브라우저를 사용하는 소수의 사용자를 신경 쓰지 않을 수 있다는 것입니다. 두 경우 모두 플래시 폴백 컨텐츠를 쉽게 생략하여 코드를 단순화 할 수 있습니다.
HTML5 비디오 및 오디오 태그 용 FAQ HTML5 비디오 및 오디오 태그는 무엇입니까?
• HTML5 비디오 및 오디오 태그는 HTML5에 소개 된 기능으로 비디오 및 오디오 요소를 HTML 코드에 직접 포함시킬 수 있습니다. 이렇게하면 외부 플러그인 또는 플레이어가 필요하지 않아 사용자에게 원활한 멀티미디어 경험을 제공합니다. 태그는 및
태그와 자동 재생, 컨트롤, 루프, 음소거 및 소스와 같은 이러한 요소의 동작을 제어 할 수있는 일부 특성으로 구성됩니다.

"HTML5 비디오 파일을 찾지 못한"오류가 발생하는 이유는 무엇입니까?

"html5 비디오 파일을 찾지 못한다"오류는 일반적으로 브라우저가 태그의 소스 속성에 지정된 비디오 파일을 찾거나 액세스 할 수없는 경우에 발생합니다. 이는 잘못된 파일 경로, 파일 삭제 또는 서버 문제와 같은 다양한 이유로 인해 발생할 수 있습니다. 파일 경로가 올바른지 확인 하고이 오류를 해결하기 위해 비디오 파일에 액세스 할 수 있는지 확인하십시오.

내 html5 비디오에 댓글을 추가하는 방법은 무엇입니까?

html5 비디오에 댓글을 추가하려면 비디오에 텍스트, 모양 또는 기타 요소를 추가하여 더 많은 정보를 제공하거나 비디오의 특정 부분을 강조하는 것이 포함됩니다. HTML5는 내장 주석 기능을 제공하지 않지만 JavaScript 및 CSS를 사용하여 사용자 정의 주석을 만들 수 있습니다. 또는 사용하기 쉬운 비디오 주석 도구를 제공하는 Veed.io와 같은 온라인 도구를 사용할 수 있습니다.

"HTML5 비디오 파일을 찾지 못한"오류를 해결하는 방법은 무엇입니까?

오류의 원인을 식별하고 해결하는 것을 포함하여"HTML5 비디오 파일을 찾지 못했습니다 "오류를 해결하십시오. 파일 경로가 잘못된 경우 수정하십시오. 파일이 삭제 된 경우 복원하거나 새 파일로 교체하십시오. 서버 문제가있는 경우 서버 관리자 또는 호스팅 제공 업체에 문의하여 도움을 요청하십시오. 경우에 따라 비디오 파일이 손상 될 수 있으며,이 경우 파일을 수리하거나 교체해야합니다.

왜 내 HTML5 비디오 재생이 Firefox에서 재생할 수 없습니까?

HTML5 비디오가 Firefox에서 재생되지 않으면 다양한 이유 때문일 수 있습니다. Firefox는 태그의 소스 속성에 지정된 비디오 형식을 지원하지 않을 수 있습니다. 브라우저는 보안 또는 개인 정보 설정으로 인해 비디오를 차단할 수도 있습니다. 이 문제를 해결하려면 비디오 형식 및 브라우저 설정을 확인하십시오.

손상된 HTML5 비디오 파일을 수정하는 방법은 무엇입니까?

손상된 HTML5 비디오 파일 수리 비디오 수리 도구 사용이 포함됩니다. 이 도구는 손상된 파일을 분석하고 파일이 올바르게 재생되지 않는 오류 나 문제를 해결하려고합니다. 인기있는 비디오 수리 도구에는 스텔라 비디오 수리 및 Wondershare Repairit이 포함됩니다.

내 html5 비디오에서 컨트롤을 추가하는 방법은 무엇입니까?

태그에 컨트롤 속성을 포함시켜 HTML5 비디오의 컨트롤을 추가 할 수 있습니다. 이 속성은 플레이/일시 정지, 볼륨 및 전체 화면 버튼을 포함하여 비디오에 기본 컨트롤 세트를 추가합니다. 사용자가 비디오를 사용하여 컨트롤이 나타납니다. <video></video> html5 비디오를 자동으로 재생할 수 있습니까?

예, 태그에 자동 재생 속성을 포함시켜 HTML5 비디오를 자동으로 재생할 수 있습니다. 그러나 많은 브라우저가 사용자와의 간섭을 방지하기 위해 사운드로 비디오를 자동으로 재생합니다. 동영상을 자동으로 재생하려면 음소거 된 속성으로 음소거를 고려하십시오.

내 html5 비디오를 루프하는 방법은 무엇입니까?

태그에 루프 속성을 포함시켜 HTML5 비디오를 통해 루프 할 수 있습니다. 이 속성으로 인해 재생 후 처음부터 비디오가 다시 시작되어 연속 루프가 생깁니다.

html5 비디오에서 여러 소스를 재생할 수 있습니까?

예, 태그 내에 여러 를 포함시켜 HTML5 비디오의 여러 소스를 지정할 수 있습니다. 브라우저는 재생할 수있는 첫 번째 소스를 사용합니다. 이를 통해 최대의 호환성을 위해 다른 브라우저에 대한 여러 비디오 형식을 제공 할 수 있습니다.

위 내용은 HTML5 비디오 및 오디오 : 마크 업 -Sitepoint의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!