問題タブ [webvtt]

オーディオ/ビデオをロードせずに、ネイティブ ブラウザーの実装を使用して、HTML5 Text Tracks API (WebVTT) を使用してキャプションを表示したいと考えています。

どうすればそれを達成できますか？

AVURLAsset を使用して webvtt ファイルをロードしようとしています。

以下は私のコードです。

質問 1: 常に「Loaded Block」に入りますが、avAsset の期間が完全ではないことがわかりました。つまり、データがロードされていないということですか? どのように変更すればよいですか？

質問 2: avplayer のサブタイトルに使用しようとしていますが、AVMediaSelectionGroup は常に null です。私は何をすべきか？

WebVTT (.vtt) キャプションを試しています。

Firefox では、キャプションは完全に機能します。Chrome では表示すらされません。

私はJSBinでこれをやっています。

念のため、いくつかのコード：

HTML5 ビデオ プレーヤーの字幕トラック要素にスタイルを適用することは可能ですか? 字幕をメディア プレーヤーの外に移動したい。

css を使用してメディア プレーヤーとトラック要素をターゲットにしようとしましたが、どちらも効果がありません。

無理なら字幕トラック要素の内容をjqueryで読めないでしょうか？.html() と .val() を使用してコンテンツを読み取ろうとしましたが、どちらも機能しません。

私は、DVD に書き込まれる一連のドキュメンタリー ビデオのフロントとして機能する Web ページに取り組んでいます。私たちは、webm ビデオの優れた圧縮と、.vtt ファイルが提供する軽量の多言語ソリューションを活用したいと考えていました。

ただし、Chrome では次のエラーが表示されます。

オリジン 'file://' からのテキスト トラックの読み込みがブロックされました: ドキュメントと同じオリジンではなく、トラック要素の親に 'crossorigin' 属性がありません。したがって、オリジン 'null' へのアクセスは許可されません。

Chrome は、私の index.html が、まったく同じローカル フォルダーにある .vtt ファイルとは別の起源であると考えているようです。これはおそらく、他の 1 つのブラウザーにも当てはまります (どのブラウザーかは思い出せませんが)。

最終製品は任意のユーザーのシステムでローカルに実行できる必要があるため、私の場合、次の解決策は適用できません。

• それを修正するWebサーバーにアップロードします。(私の場合、DVD から実行する必要があります。)
• ファイルからのファイル アクセスを許可するように Chrome を設定します。これは、何かをローカルでテストする場合に最適です。( http://www.chrome-allow-file-access-from-file.com/ ) (しかし、各 DVD ユーザーがブラウザーをハッキングすることは望んでいません。)
• .htaccess をいじる (Web サーバー上で動作しますが、私が理解している限り、これらのファイルはローカルでは動作しません。申し訳ありませんが、このソリューションへのリンクを思い出せませんでした。)
• 字幕をビデオに焼き付けます (すべての言語に対して DVD に十分なスペースがありません)。

私は video.js を使用していますが、この問題を解決できる場合は、別のフレームワークを検討していただければ幸いです。また、他のタイプの字幕 (.srt など) や、ビデオ タグ内のタグを追跡しないものも使用できます。

一部のソリューションでは、CORS の有効化について言及されています ( http://enable-cors.org/ )。ローカルの .vtt ファイルで動作しますか、それともワイルド グース チェイスですか?

お時間をいただきありがとうございます。

アプリケーションがアップロード時に .vtt ファイルを許可できるようにしたいと考えています。現在は .txt ファイルのみを受け付けていましたが、キャプションに .vtt 機能を追加したいと考えています。

私はこれを試しました*運がありません：

この場合の適切な形式は何ですか?

昨日、私はHTML5 Autoplayの作業を開始し、 HTML5 Tag aka Subtitlesも追加しました。

*.mp4 ビデオのサンプルを再生しているときに、相対パス (file:///Users/user/Desktop/test.html) を介して字幕を表示できる理由を理解するのに苦労していますが、ファイルを実行するとたとえば、Pycharm を使用すると、ブラウザでこのファイル パス ( http://localhost:63343/Desktop/test.html ) が生成され、字幕が正常に読み込まれます。

だから私の問題を解決する方法があるかどうか疑問に思っています。絶対パス (file:///Users/user/Desktop/test.html) から字幕を読み込むにはどうすればよいですか。ここに欠けているものはありますか？

Webブラウザとしてgoogle-chromeを使用しています。

更新: Web ページをデバッグしようとしていたところ、 VTT ファイルの読み込み時に Crossorigin エラーと同じエラーが発生しました。同じ人がDisable same origin policy in Chrome でこの問題を解決できたと言っているところ。次の方法 ( open -a Google\ Chrome --args --disable-web-security) でブラウザを再起動しようとしましたが、問題に違いはありませんでした。

更新 2:代替ブラウザー Safar (バージョン 9.0.2 (11601.3.9)) で同じ問題をテストしました。Safari では、(file:///Users/user/Desktop/test.html) で字幕を表示でき、( http://localhost:63343/Desktop/test.html ) でビデオが表示されません。

Google-Chrome (バージョン 47.0.2526.106 (64 ビット)) を使用すると、ビデオを両方の方法で再生できますが、字幕は ( http://localhost:63343/Desktop/test.html ) でしか見ることができません。

Web でさらに検索すると、ユーザーが crossOrigin プロパティを (anonymous) または (use-credentials) に設定できるCORS 設定属性を見つけることができました。私もそれを試しましたが、結果はビデオの黒い画面でした。

結論として、パスファイルの問題ではなく、セキュリティの問題だと思います。

test.html コードのサンプル:

サブタイトル-en.vtt ファイル コードのサンプル:

iOS/TVOS では、URL からリモート .vtt ファイルをロードし、それを URL からロードされたリモート HLS ビデオの字幕トラックとして使用することはできますか (m3u8 プレイリスト内で指定されている VTT とは対照的に)?

疑似コード:

編集：

ドキュメントには、字幕に AVAsset を使用することが記載されていますが、実際に例を持っている人はいますか? リモート VTT をロードするのではなく、字幕として文字列を追加する例しか見つかりません。