웹 페이지의 비디오에 자막을 표시하도록 모바일 사파리를 구성하는 방법

내 웹 사이트에 YouTube에서 삽입 된 자막 비디오가 있는데, 데스크톱 컴퓨터의 Safari에서 캡션을 볼 때 캡션이 표시됩니다. iPhone 6의 Safari에서 웹 페이지를 볼 때 캡션이 표시되지 않습니다.

나는 "자막 및 CC"에 대한 하단 회색 막대의 오른쪽 하단에있는 작은 아이콘을 클릭하고 "영어"로 설정했습니다.

iPhone 설정> 일반> 손쉬운 사용> 미디어> 자막 및 캡션을 켜기 및 기본 유형으로 설정했습니다.

내 iPhone에서 YouTUBE 앱으로 비디오를 클릭하고 그것을 보시면 캡션이 표시 될 것이지만 웹 페이지에서 직접 볼 때도 보여주기를 바랍니다.

iPhone 문제, Safari 문제, YouTube 문제 또는 내 웹 페이지의 iframe / embed 코드에 대한 간단한 수정이 필요한지 확실하지 않습니다.

나는 "& cc_load_policy = 1"을 내 src 태그의 일부로 사용합니다.

iOS / Safari 및 iOS / Chrome에서도 웹 페이지의 video-js 동영상에 캡션을 표시하지 않습니다.

거기 누구든지 이것에 빠지니?

— 슬로 게
소스

이것은 웹 내장 비디오가 iOS 장치에서 재생되는 방식의 문제 일 가능성이 큽니다. 동영상이 웹 페이지에서만 iframe 처리 되었습니까? 아니면 YouTube 동영상에 연결된 동영상 플레이어를 iframe으로 설정 하시겠습니까? 사용중인 video-j의 버전은 무엇입니까?

— kenjikato

나는 video-js를 사용하여 div의 우리 서버에있는 iframe과 다른 비디오를 포함하는 YouTube 비디오를 가지고 있습니다. video-js는 4.3.0입니다.

— sloga

한 가지 다른 질문은 어떤 비디오 (거의 불가능) 또는 인코딩을 제어하는 비디오에 대해서만이 작업을 수행하려고합니까?

— kenjikato

우리가 제어하는 비디오와 모든 mp4입니다

— sloga

비디오가 CAE-608로 인코딩되었는지 알고 있습니까? 직접 동영상을 호스팅하거나 Youtube를 사용 하시겠습니까? 내 대답에 웹 페이지를 넣어 보았습니까?

— kenjikato

먼저 자막을 비디오에 추가 할 수있는 몇 가지 방법이 있다는 것을 이해해야합니다. 특별히 iOS를보고 있다면 비디오는 CEA-608 인코딩 표준을 준수해야 하며 HTTP 라이브 스트림 (HLS) 또는 MP4 비디오 중 하나 여야합니다. 다른 동영상 형식은 iOS에서 CC 재생이 필요한 경우 삽입 된 동영상으로 작동하지 않습니다.

동영상이 표준에 부합하는 경우 HTML5 웹 페이지에 설정된 재생 설정에 관한 것입니다.

귀하의 페이지에 YouTube 동영상을 삽입하려는 경우. 동영상에 기존 자막 트랙이 있는지 확인해야합니다 (즉, 자동으로 자막이 번역 된 자막이 아닌).

아래는 자막 트랙이 생성 된 The Martian의 영화 예고편을 재생해야하는 웹 페이지의 예입니다.

이 페이지가 Safari 및 Chrome이 설치된 데스크톱 Mac, Chrome이 설치된 Windows 7 노트북, iOS 9.2가 설치된 iPhone 6 및 iOS 8.4.1이 설치된 iPad Air에서 작동하는지 확인했습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        <div style="overflow:hidden;height:270px;width:400px;">
            <div id="youtube_canvas" style="height:270px;width:400px;">
                <iframe style="height:270px;width:400px;border:0;" frameborder="0" src="https://www.youtube.com/embed/aIL01wrwq6w?hl=en&amp;autoplay=1&amp;cc_load_policy=1&amp;loop=0&amp;fs=1&amp;showinfo=0"></iframe>
            </div>
            <style>#youtube_canvas img{max-width:none!important;background:none!important}</style>
        </div>
    </body>
</html>

YouTube 동영상의 핵심 코드 비트는 &cc_load_policy=1이미 발견 한 것입니다.

그러나 링크 된 비디오가 원본 비디오 사양을 충족시키지 못하면 iOS에서 CC 텍스트가 표시되지 않습니다. 기본 YouTube 플레이어는 CAE-608 표준이 아닌 동영상을 재생하지만 웹 플레이어를 통해 iOS는 재생하지 않습니다.

자신의 비디오에이 작업을 수행해야하는 경우 인코딩이 CEA-608 내장 CC 트랙을 생성하는지 확인해야합니다.

이게 도움이 되길 바란다.

— 켄지 카토
소스