2

昨日、私は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 コードのサンプル:

<!DOCTYPE html>
<html>
<head>
    <title>Sample of video with vtt file</title>
</head>
<body>
<video id="video" controls preload="metadata" width="350" height="250" autoplay>
    <source src="SampleVideo.mp4" type="video/mp4">
    <source src="SampleVideo.ogg" type="video/ogg">
    <track label="English" kind="subtitles" srclang="en" src="subtitles-en.vtt" default>
</video>
</body>
</html>

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

WEBVTT

Introduction
00:00:00.000 --> 00:00:02.000
Wikipedia is a great adventure. It may have
its shortcomings, but it is the largest collective
knowledge construction endevour

Disclaimer
00:00:02.000 --> 00:00:05.000
This is just a track demo using VTT
4

1 に答える 1

1

ご自身で解決されたようですが、その通りです。ローカル ファイル システム上のファイルにその方法でアクセスできないという点で、実際にはセキュリティ上の問題です。

于 2016-01-21T11:35:08.887 に答える