skimemo

• バックアップ一覧
• 現在との差分 を表示
• ソース を表示
• バックアップ を表示
• skimemo - 日記/2019-06-08/Zenko＋Clapprでdash_shaka_playback 1_1002エラーが出た話 へ行く。
  • 1 (2019-06-08 (土) 16:19:45)

• 追加された行はこの色です。
• 削除された行はこの色です。

#blog2navi()
*Zenko＋Clapprでdash_shaka_playback 1_1002エラーが出た話 [#y4f93aef]

S3互換サーバー(Zenko)に動画ファイルを置き、HLSでアクセスしようとした場合、CORS(Cross-Origin Resource Sharing)が問題になります。~
動画閲覧UIのHTMLは通常Zenko外にあるので、そこからZenkoにアクセスしようとしても、CORS制限でエラーとなってしまうのです。~
~
私が遭遇したのは、localhost(開発環境)から[[Clappr.Player:https://github.com/clappr/clappr]]でZenkoの動画ファイルを読みに行くケースです。~
全てローカルで閉じている場合は正常に動画が再生されるのですが、ファイルをZenkoに置くと以下のエラー画面となってしまいます。~
~
#ref(err.png,480)~
Could not play video. There was a problem trying to load the viedeo. Error code: dash_shaka_playback:1_1002~
~
エラーコードで検索しても何も引っかかりません。~
しかし、consoleに具体的な内容が出力されていました。~
 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3.webdb.co.jp/path/to/mpd/output.mpd. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
つまり、CORSヘッダーが無くてアクセスができない、と言っています。~
~
Zenkoの環境は、DockerでZenkoが動き、表はapacheがrewriteをしています。~
そこで、apacheにrewriteと共存する形でヘッダーに記述する必要があります（たぶん）。
 <IfModule mod_headers.c>
      SetEnvIf Origin "http(s)?://(localhost|domain2\.com)$" AccessControlAllowOrigin=$0
      Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
 </IfModule>
参考: https://codeday.me/jp/qa/20181130/41819.html ~
~
これで無事CORSヘッダーが出力され、動画も再生できるようになりました。~
原因が分かるまでに半日、ヘッダーの出力方法が分かるまでに数時間かかりました・・・orz..

#htmlinsert(twitterbutton.html)
RIGHT:Category: &#x5b;[[Linux>日記/Category/Linux]]&#x5d; - 16:19:21
----
RIGHT:&blog2trackback();
#comment(above)
#blog2navi()