HTML5 비디오에 대한 액세스 가능한 오디오 설명-JS 튜토리얼-php.cn

Accessible Audio Descriptions for HTML5 Video 키 포인트 요약

전통적인 시각 장애 오디오 설명은 전문 비디오 편집 장비를 인코딩하고 비디오 파일의 별도의 오디오 트랙에 포함시켜야합니다. 이 과정은 종종 대부분의 콘텐츠 제작자에게 비현실적입니다.

html5 비디오 사양은

객체를 제공합니다.이 객체는 이론적으로 오디오 설명을위한 스위치 버튼을 구현하고 오디오 및 비디오 볼륨을 별도로 제어합니다. 그러나 브라우저는 현재이 기능에 대한 지원이 제한되어 있습니다.

또 다른 솔루션은 HTML5 오디오 및 비디오의 기능인 audioTracks를 사용하여 여러 소스를 동기화하는 것입니다. 이 기능은 현재 브라우저 지원이 제한되어 있지만 기존의 널리 구현 된 기능을 사용하여 두 개의 미디어 파일을 동시에 시작하고 유지할 수 있습니다.

비디오 API는 비디오 이벤트와 오디오 재생을 동기화하기 위해 Play, Pause, End 및 TimeUpdate와 같은 이벤트를 제공합니다. "TimeUpdate"이벤트는이 목적에 특히 중요하며 초당 평균 3-5 회 트리거됩니다. 이 접근법을 사용하면 전용 소프트웨어 또는 별도의 비디오 버전없이 액세스 가능한 오디오 설명을 생성 할 수 있습니다.

MediaController 최근 고객이 액세스 가능한 비디오 플레이어를 만들도록 요청했으며 실제로 기능 중 하나가 오디오 설명이되기를 원했습니다. 오디오 설명은 시각 장애가있는 맹인 또는 시각 장애가있는 사람들을 목표로하며 중요한 시각적 세부 사항을 설명하기위한 추가 음성 정보를 제공합니다. 전통적으로 오디오 설명이있는 비디오는 특별히 작성되어야하며 오디오는 단일 비디오 파일의 별도 트랙으로 인코딩됩니다. 이를 위해서는 이러한 오디오 트랙을 인코딩하기 위해 매우 전문적인 비디오 편집 장비가 필요하므로 대부분의 컨텐츠 제작자가 달성하기가 어렵습니다. 이것이 제가 온라인에서 오디오 설명으로 보는 것입니다. 예를 들어, BBC IPLAYER는 이러한 콘텐츠를 제공하지만 비디오 플레이어는 상대 볼륨을 제어 할 수 없으며 오디오 설명을 끄질 수 없습니다. 쇼의 개별 또는 비 설명 버전 만 볼 수 있습니다. html5 데뷔

html5 비디오 사양은

객체를 제공하므로 스위치 버튼을 구현하고 오디오 및 비디오 볼륨을 별도로 제어 할 수 있습니다. 그러나 브라우저 지원은 거의 존재하지 않습니다. 글을 쓰는 시점에서 IE10 만이이 기능을 지원합니다. 어쨌든 내 고객이 원하는 것은 별도의 버전을 만들지 않고 전용 소프트웨어를 사용하지 않고 쉽게 만들 수있는 별도의 파일의 오디오 설명입니다. 물론, 그것은 꽤 많은 브라우저에서 실행해야합니다. 따라서 다음 아이디어는 여러 소스를 동기화 할 수있는 HTML5 오디오 및 비디오의 기능인

를 사용하는 것입니다. 그러나 브라우저 지원에 대한 브라우저 지원은 똑같이 슬림합니다. 작성 당시 Chrome 만이이 기능을 지원합니다. 그러나이 지원이 없어도 두 개의 미디어 파일을 동시에 시작하는 것은 분명히 문제가되지 않으며 동기화되면됩니다. 그렇다면 기존의 널리 구현 된 기능을 사용하여이를 달성 할 수 있습니까? 비디오 이벤트 <..> Video API는 우리가 연결할 수있는 많은 이벤트를 제공하며, 이는 비디오 이벤트와 오디오 재생을 동기화해야합니다.
"Play"이벤트 (비디오 재생시 트리거).
"일시 정지"이벤트 (비디오가 일시 중지 될 때 트리거 됨).
"END"이벤트 (비디오 끝에서 트리거).
"TimeUpdate"이벤트 (비디오가 재생 될 때 지속적으로 트리거 됨).

"TimeUpdate"이벤트는 매우 중요합니다. 트리거 주파수는 지정되지 않았으며 실제로는 크게 다릅니다. 그러나 전체 평균은 초당 3-5 배에 해당하므로 목적에 따라 충분합니다. 두 개의 비디오 파일을 동기화하는 비슷한 방법을 보았지만 작은 차이가 분명하기 때문에 특히 성공하지 못합니다. 그러나 오디오 설명은 일반적으로 정확하게 동기화 될 필요가 없습니다. 어느 쪽이든, 100 밀리 초 지연이 허용되며 오디오 파일을 재생하는 데 훨씬 덜 부담이됩니다. 따라서 기존 비디오 이벤트를 사용하여 오디오 및 비디오 재생을 함께 고정하면됩니다.
비디오가 재생되는 동안 오디오를 재생합니다.
비디오가 일시 중지되면 오디오를 일시 중지합니다.
비디오가 끝나면 비디오와 오디오를 동시에 일시 중지하십시오.
시간이 업데이트되면 오디오 시간이 비디오 시간과 다른 경우 오디오 시간이 비디오 시간과 일치하도록 설정됩니다.

일부 실험 후, 나는 다음과 같이 몇 초 만에 시간을 비교하여 최상의 결과를 얻을 수 있음을 발견했습니다.
이것은 반 직관적 인 것처럼 보이며, 처음에는 우리가 할 수있는 정확한 데이터가 필요하다고 생각했지만 그렇지 않은 것 같습니다. 비디오 트랙의 텍스트 오디오 사본으로 테스트하면 (즉, 오디오와 비디오 모두 동일한 사운드를 생성 함) 동기화가 좋거나 나쁘다는 것을 쉽게들을 수 있습니다. 이를 바탕으로 반올림 숫자가 반올림하지 않는 것보다 동기화 결과가 향상된다는 것을 알았습니다. 그래서 이것은 마지막 스크립트입니다. 브라우저가
를 지원하는 경우, 우리는이를 사용하면됩니다. 그렇지 않으면 아래에 설명 된대로 수동 동기화를 구현합니다.

는 스크립트로만 정의되지만 정적 "MediaGroup"속성을 사용하여 컨트롤러를 정의 할 수 있습니다.
우리 가이 작업을 수행하면 JavaScript없이 크롬에서 작동합니다. 미디어 소스를 동기화하지만 사용자는 오디오를 제어 할 수 없습니다 (오디오를 끄지 않아도) 브라우저 는 오디오가 무엇을 나타내는 지 알지 못하기 때문입니다. 이 경우 오디오를 비디오로 인코딩하는 것이 가장 좋습니다. 브라우저가 기본 컨트롤을 인식하고 제공 할 수있는 객체에 나타날 수 있기 때문입니다. 그러나 우리는 데이터가 없기 때문에 이것은 관련이없는 질문입니다! 따라서 스크립트를 사용할 수 없으면 오디오가 전혀 재생되지 않습니다. 이것은 최신 데모로, 최신 버전의 Opera, Firefox, Chrome, Safari 또는 IE9 이상에서 실행할 수 있습니다. - 오디오 설명 Demo 물론, 이것은 단순한 개념 증명 데모 일뿐입니다. 초기 기능 감지가 없으며 기본 "컨트롤"속성에서 제공하는 기본 제어 만 있습니다. 올바른 구현을 위해서는 오디오를 전환하는 버튼과 별도의 볼륨 슬라이더를 제공하기 위해 사용자 정의 컨트롤이 필요합니다. 인터페이스는 키보드를 통해 액세스 할 수 있어야하며 일부 브라우저의 기본 컨트롤에는 그렇지 않습니다. 또한 버퍼링을 올바르게 처리해야합니다. 실제로 비디오가 사전로드 된 지점을 검색하면 비디오가 재 동기화 될 수있을 정도로 비디오가 충분히로드 될 때까지 오디오가 계속 자유롭게 재생됩니다. 또한 설명 자체가 전문 표준을 거의 충족시키지 못한다고 언급하고 싶습니다! 그것이 당신이 내 말을 듣고, 대담함을 사용하여 기록하고 전환 할 수있는 곳입니다. 그러나 그것이 바로이 접근법의 기술적 장벽이 얼마나 낮은지를 효과적으로 보여줍니다. 비디오를 편집 할 필요가 없으며 무료 소프트웨어로 한 시간 안에 오디오를 만들었습니다. 개념의 증거로서, 나는 그것이 매우 성공적이라고 생각합니다 - 나는 내 고객이 매우 만족할 것이라고 믿습니다! HTML5 비디오에 대한 액세스 가능한 오디오 설명의 FAQ (FAQ) HTML5 비디오에서 오디오 설명에 액세스하는 것이 중요합니까?
액세스 가능한 오디오 설명은 HTML5 비디오를보다 포괄적이고 사용자 친화적으로 만드는 데 중요한 역할을합니다. 시각 장애가있는 사용자에게 특히 유익한 시각적 정보의 청각 동등 물질을 제공합니다. 이 설명은 메인 트랙에서 이해할 수없는 중요한 시각적 세부 사항을 설명합니다. 액세스 가능한 오디오 설명을 추가함으로써 컨텐츠 제작자는 더 많은 청중이 비디오에 액세스 할 수 있도록 디지털 포함을 촉진 할 수 있습니다.
내 html5 비디오에 오디오 설명을 추가하는 방법은 무엇입니까?
html5 비디오에 오디오 설명 추가에는 여러 단계가 포함됩니다. 먼저 비디오의 시각적 요소를 설명하는 별도의 오디오 트랙을 만들어야합니다. 다양한 오디오 편집 소프트웨어를 사용하여 수행 할 수 있습니다. 오디오 설명 트랙이 준비되면 "설명"으로 설정된 종류의 속성이있는 요소를 사용하여 HTML5 비디오에 추가 할 수 있습니다. 이렇게하면 오디오 설명 트랙이 인식되고 비디오로 재생되도록합니다.
왜 내 html5 비디오 재생할 수 없습니까?
HTML5 비디오가 재생할 수없는 몇 가지 이유가있을 수 있습니다. 이것은 올바르게 인코딩하지 않는 것과 같은 비디오 파일 자체의 문제로 인한 것일 수 있습니다. 웹 브라우저 또는 비디오 플레이어가 비디오 형식을 지원하지 않는 문제 때문일 수도 있습니다. 문제를 해결하려면 다른 브라우저 나 다른 장치에서 비디오를 재생하십시오. 문제가 지속되면 비디오 파일을 확인하고 HTML5에서 형식이 지원되는지 확인해야 할 수도 있습니다.
HTML5 비디오에서 일반적으로 사용되는 형식은 무엇입니까?
HTML5 비디오는 MP4, Webm 및 OGG를 포함한 몇 가지 일반적인 비디오 형식을 지원합니다. MP4 형식은 모든 주요 브라우저 및 장치에서 널리 지원되므로 온라인 비디오에 인기있는 선택입니다. Webm과 OGG는 오픈 소스 형식이며 모든 브라우저에서 제대로 작동하지 않을 수도 있지만 널리 지원됩니다.
"HTML5 비디오 파일을 찾지 못한"오류를 수정하는 방법은 무엇입니까?
"HTML5 비디오 파일을 찾지 못했습니다"오류는 일반적으로 브라우저가 요소의 소스 속성에 지정된 비디오 파일을 찾을 수없는 경우에 발생합니다. 이 오류를 해결하려면 소스 속성의 파일 경로가 올바르고 비디오 파일이 지정된 경로에 있는지 확인하십시오. 파일 경로가 올바른 경우 비디오 파일이 html5이고 브라우저에서 지원되는 형식을 확인하십시오.
내 HTML5 비디오를 반응하는 방법은 무엇입니까?
HTML5 비디오를 응답하기 위해 CSS를 사용하여 비디오 너비를 100%, 높이를 자동으로 설정할 수 있습니다. 이렇게하면 컨테이너의 너비에 맞게 비디오가 확장되거나 아래로 축소되어 다른 화면 크기에 응답 할 수 있습니다. <video></video> _{내 html5 비디오에 자막이나 나레이션을 추가 할 수 있습니까?}
예, "캡션"또는 "자막"으로 설정된 종류의 속성을 가진 요소를 사용하여 HTML5 비디오에 자막 또는 내레이션을 추가 할 수 있습니다. 자막 또는 나레이션이있는 WebVTT 파일을 작성한 다음이 파일을 요소의 SRC 속성에 참조해야합니다.
내 HTML5 비디오의 재생을 제어하는 방법은 무엇입니까?
html5는 재생, 일시 정지, 볼륨 및 전체 화면을 포함한 몇 가지 내장 비디오 재생 컨트롤을 제공합니다. 이러한 컨트롤은
요소에 컨트롤 속성을 추가하여 활성화 될 수 있습니다. 또한 JavaScript를 사용하여 사용자 정의 컨트롤 및 상호 작용을 만들 수 있습니다.
내 웹 사이트에 html5 비디오를 포함시킬 수 있습니까?
예, 요소를 사용하여 웹 사이트에 html5 비디오를 포함시킬 수 있습니다. SRC 속성을 사용하여 비디오 파일의 소스를 지정해야하며 컨트롤, 자동 재생 및 루프와 같은 선택적 속성을 추가하여 비디오 재생을 사용자 정의 할 수도 있습니다.
비디오 재생에 HTML5를 사용하면 어떤 이점이 있습니까?
html5는 비디오 재생에 많은 이점을 제공합니다. 여러 비디오 형식을 지원하고 내장 비디오 재생 컨트롤을 제공하며 자막 및 오디오 설명과 같은 접근성 기능을 추가 할 수 있습니다. 또한 HTML5 비디오는 응답 할 수있어 모든 장치와 화면 크기에서 멋지게 보일 수 있습니다. 마지막으로 HTML5는 웹 표준이므로 추가 플러그인이나 소프트웨어가없는 모든 최신 웹 브라우저에서 지원됩니다.