S3互換サーバー(Zenko)に動画ファイルを置き、HLSでアクセスしようとした場合、CORS(Cross-Origin Resource Sharing)が問題になります。
動画閲覧UIのHTMLは通常Zenko外にあるので、そこからZenkoにアクセスしようとしても、CORS制限でエラーとなってしまうのです。
私が遭遇したのは、localhost(開発環境)からClappr.PlayerでZenkoの動画ファイルを読みに行くケースです。
全てローカルで閉じている場合は正常に動画が再生されるのですが、ファイルをZenkoに置くと以下のエラー画面となってしまいます。
#ref(): The style ref(filename,pagename) is ambiguous and become obsolete. Please try ref(pagename/filename)
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..