“video”要素~“crossorigin”属性

“crossorigin”属性について

“crossorigin”属性は動画ファイルを読み込む時のCORSリクエストを設定します。“crossorigin”属性を使用した場合、その動画ファイルを読み込む時にCORSリクエストを実行します。

通常“video”要素で読み込んだ別のオリジンにある動画ファイルを“canvas”要素で再利用する場合、“汚染”されてしまい、使用できる機能が制限されます。しかし、“crossorigin”属性によってCORSを使用することであたかも同じオリジンにある動画ファイルであるかのように使用することができるようになります。

“crossorigin”属性を指定しない場合CORSは使用されません。

指定できる値

不正な文字列、もしくは空の値の場合は“crossorigin="anonymous"”として扱われます。

サンプルコード

CORSリクエストを実行(認証情報は使用しない)
<p><video src="sample.mp4" crossorigin="anonymous" controls>動画ファイルを再生できません</video></p>
CORSリクエストを実行(認証情報を使用する)
<p><video src="sample.mp4" crossorigin="use-credentials" controls>動画ファイルを再生できません</video></p>
CORSリクエストを実行しない
<p><video src="sample.mp4" controls>動画ファイルを再生できません</video></p>