비디오: HTML5 기본 마크업 2024
간단히 말하면, HTML5에는 두 가지 주요 미디어 요소가 있는데, 둘 다 사용하기가 쉽지 않습니다. 오디오 요소의 이름이 지정되고 video 요소의 이름이 지정됩니다. HTML5에서 브라우저는 어떤 플레이어가 내장되어있어 사용할 수 있는지 결정합니다. 그에 따라 오디오 및 비디오 사용을 계획해야합니다.
다음은 오디오 마크 업의 간단한 버전입니다.
컨트롤 항목은 다음과 같이 오디오 재생 및 동작을 관리하는 데 사용할 수있는 많은 컨트롤 속성을 나타냅니다 (알파벳순으로 표시).
자동 재생: 브라우저가 재생을 시작하도록 지시합니다 오디오 파일을로드하는 즉시. 이 속성의 유일한 합법적 인 값은 자동 재생이지만 HTML5에는 값이 엄격히 필요하지 않습니다.
-
controls: 브라우저에 오디오 재생을 제어하는 화면 위젯을 표시하도록 지시합니다 (일반적으로 일시 중지 / 재생 버튼, 진행률 막대 및 볼륨 컨트롤 사용). 자동 재생에서와 마찬가지로이 속성의 유일한 합법적 인 값은 컨트롤이지만 HTML5에서는 값을 엄격하게 요구하지 않습니다.
-
-
preload: 브라우저에 객체 파일을 미리로드해야하는지 여부와 그 경우 어떻게 미리로드해야하는지 알려줍니다. 가능한 값은 다음과 같습니다.
-
none: 페이지가로드 될 때 오디오 파일의 일부를로드하지 않습니다.
-
-
auto: 페이지가로드 될 때 전체 오디오 파일을로드합니다.
-
자동 재생이있는 경우 사전로드 속성이 무시됩니다.
대안 섹션은 매우 흥미롭고 오래된 브라우저를 지원하는 데 매우 도움이됩니다. 페이지 방문자는 브라우저가 오디오 요소를 지원하지 않는 경우 (브라우저가 인식 할 수없는 태그를 무시하기 때문에) 태그 안에있는 내용을 보거나 실행하지만 HTML5에 익숙한 브라우저는 그러한 대체 지시를 건너 뛰기에 충분히 똑똑합니다.
-
내장 HTML5 오디오 재생 기능을 사용할 수없는 방문자 만이 마크 업을 경험하게되므로 특정 플레이어 및 다양한 파일 형식에 대해 플러그인을 호출 할 수 있습니다.
여기에있는 예제는 선택한 형식을 재생할 수없는 경우를 대비하여 다른 파일 형식을 호출하는 방법을 보여주기 위해이를 이용합니다. 그림과 같이 HTML5 오디오 지원이없는 브라우저는
Alternatives 라는 단어를 화면에 표시합니다! 다음은 재생되지 않는 마크 업입니다. 사용자가 온 스크린 컨트롤의 재생 버튼을 트리거하고 페이지가 화면 상에 유지되는 한 계속 반복됩니다. 또한 이전 브라우저의 경우 WAV 및 MP3 대체품을 제공합니다.
브라우저가 HTML5 오디오를 지원하지 않습니다. 대체 재생이 제공됩니다.
기본적으로 시작 태그에 src 속성을 포함하지 않으면 첫 번째 요소의 대상이 HTML5 요소를 인식하는 브라우저에서 재생됩니다. 이 설정을 사용하면 가장 좋아하는 것으로 시작하여 대안 섹션에 재생 옵션을 쉽게 쌓을 수 있습니다.
세 가지 형식의 플레이어를 사용할 수없는 경우 사운드가 전혀 재생되지 않습니다. 브라우저가 사운드 파일 (ogg first,.wav second,.mp3 third)과 일치하는 플레이어를 발견하면 브라우저는 플레이어를 사용하여 사운드를 재생 한 다음 브라우저는 HTML의 나머지 부분을 계속 처리합니다 다음의 문서.
이 그림은 Chrome에서 화면과 비슷한 텍스트 및 정보가 추가 된 제대로 구성된 HTML 파일 내부의이 페이지를 보여줍니다.
