So konfigurieren Sie Mobile Safari, um Untertitel für Videos auf der Webseite anzuzeigen

Ich habe ein Untertitelvideo von YouTube auf meiner Website eingebettet, das die Untertitel anzeigt, wenn es in Safari auf einem Desktop-Computer angezeigt wird. Wenn ich die Webseite in Safari auf dem iPhone 6 ansehe, werden die Untertitel nicht angezeigt.

Ich habe auf das kleine Symbol unten rechts in der unteren grauen Leiste für "Untertitel und CC" geklickt und es auf "Englisch" eingestellt.

Ich habe meine iPhone-Einstellungen > Allgemein > Barrierefreiheit > Medien > Untertitel & Untertitel auf Ein und Standardtyp gesetzt.

  • Wenn ich auf das Video klicke und es mit der YouTube-App auf meinem iPhone ansehe, werden die Untertitel angezeigt, aber ich möchte, dass sie auch angezeigt werden, wenn ich sie direkt von der Webseite aus anschaue.

Ich bin mir nicht sicher, ob es sich um ein iPhone-, Safari- oder YouTube-Problem handelt oder ob eine einfache Bearbeitung des Iframe-/Einbettungscodes auf meiner Webseite erforderlich ist.

Ich habe "&cc_load_policy=1" als Teil meines src-Tags.

  • iOS/Safari und iOS/Chrome zeigen auch KEINE Untertitel für Video-js-Videos auf der Webseite an.

Ist jemand da draußen darauf gestoßen?

Dies ist höchstwahrscheinlich ein Problem mit der Art und Weise, wie im Web eingebettete Videos auf iOS-Geräten wiedergegeben werden. Ist das Video nur auf der Webseite iframe, oder verwenden Sie das iframe eines Video-js-Players, der mit dem YouTube-Video verbunden ist? Welche Version von video-js verwendest du?
Ich habe ein Youtube-Video mit iframe eingebettet und dann ein weiteres Video auf unserem Server in einem div mit video-js. video-js ist 4.3.0
Eine andere Frage, möchten Sie dies für JEDES Video tun (fast unmöglich) oder nur für Videos, deren Codierung Sie steuern?
Nur Videos, die wir kontrollieren, und sie sind alle mp4
Weißt du, ob die Videos CAE-608-codiert sind? Werden Sie die Videos selbst hosten oder Youtube verwenden? Haben Sie die Webseite, die ich in meine Antwort unten eingefügt habe, ausprobiert, um zu sehen, ob sie für Sie funktioniert?

Antworten (1)

Zunächst müssen Sie verstehen, dass es mehrere Möglichkeiten gibt, Untertitel zu einem Video hinzuzufügen. Wenn Sie sich speziell iOS ansehen, muss das Video dem CEA-608- Codierungsstandard entsprechen und entweder ein HTTP Live Stream (HLS) oder ein MP4-Video sein. Andere Videoformate funktionieren unter iOS NICHT als eingebettetes Video, wenn Sie CC-Wiedergabe benötigen.

Wenn das Video einen dieser Standards erfüllt, dann liegt es an den Wiedergabeeinstellungen, die für die HTML5-Webseite festgelegt wurden.

Wenn Sie ein YouTube-Video auf Ihrer Seite einbetten möchten. Sie müssen sicherstellen, dass das Video über eine vorhandene Untertitelspur verfügt (keine der spontan automatisch übersetzten).

Unten sehen Sie ein Beispiel einer Webseite, die einen Filmtrailer für „Der Marsianer“ abspielen soll, für den ein Closed Caption-Track erstellt wurde.

Ich habe überprüft, dass diese Seite auf meinem Desktop-Mac mit Safari und Chrome, einem Windows 7-Laptop mit Chrome, einem iPhone 6 mit iOS 9.2 und einem iPad Air mit iOS 8.4.1 funktioniert.

<!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>

Das Schlüsselcode-Bit für YouTube-Videos haben &cc_load_policy=1Sie bereits gefunden.

Wenn das verlinkte Video jedoch nicht den ursprünglichen Videospezifikationen entspricht, wird in iOS niemals CC-Text angezeigt. Der native YouTube-Player spielt Videos ab, die nicht dem CAE-608-Standard entsprechen, iOS über einen Webplayer jedoch nicht.

Wenn Sie dies für Ihre eigenen Videos tun müssen, müssen Sie sicherstellen, dass Ihre Codierung eine CEA-608 eingebettete CC-Spur erstellt.

Ich hoffe das hilft.