<video>タグの使い方①

前回の投稿、「hls.jsを使ったライブストリーミング配信をつくってみる」

前編　https://financial-pharmacist.blogspot.com/2020/09/hlsjspart1.html

後編　https://financial-pharmacist.blogspot.com/2020/09/hlspart2.html

で、実ははじめて<video>タグを使ったので、使い方をおさらいしてみます。

<video>タグの属性

autoplay

論理型の属性です。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。

autoPictureInPicture 

論理属性で、 true であれば、ユーザーがこの文書と他の文書やアプリケーションとの間を行き来したときに、自動的にピクチャインピクチャモードに切り替わるようにすることを示します。

buffered

メディアがどれだけの時間分バッファリングされたかを判断するために、読み取ることが可能な属性です。この属性は TimeRanges オブジェクトを持ちます。

controls

この属性が指定された場合、再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。

controlslist 

• controlslist 属性が指定されていると、ブラウザー自身のコントロールのセットを表示する場合 (例えば controls 属性が設定されている場合)、メディア要素に表示するコントロールを選択するのを補助します。指定できる値は nodownload, nofullscreen, noremoteplayback です。
• disablePictureInPicture 属性を使用すると、ピクチャインピクチャモード (およびコントロール) を無効にすることができます。

crossorigin

この列挙型の属性は、関連画像を取得する際に CORS を使用するかを示します。CORS が有効なリソース は、汚染されることなく <canvas> 要素で再利用できます。次の値が使用できます:

• anonymous

資格情報を伴わずにオリジン間リクエストを実行します。すなわち、Cookie や X.509 証明書がない Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行いません。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダーの設定なし)、画像が汚染され、その使用も制限されます。

• use-credentials

クレデンシャルを伴ってオリジン間要求を実行します。すなわち、Cookie や X.509 証明書を伴う Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行います。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials: HTTP ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。

この属性が提供されない場合、リソースは CORS 要求なしで取得され (Origin: HTTP ヘッダーを送信せずに取得)、<canvas> 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性 を参照してください。

currentTime

currentTime を読み込むと、秒単位で指定されたメディアの現在の再生位置を示す倍精度の浮動小数点値を返します。メディアがまだ再生を開始していない場合は、再生を開始する時間オフセットを返します。 currentTime を設定すると、現在の再生位置を指定された時間に設定し、メディアがすでに読み込まれている場合には、その位置までメディアをシークします。

メディアがストリーミングされている場合、そのデータがメディアバッファ上で期限切れになっていると、ユーザエージェントがリソースの一部を取得できない可能性があります。メディアによっては、0秒から開始しないメディアのタイムラインがある場合もあり、 currentTime をそれ以前の時間に設定すると失敗します。メディアタイムラインの参照フレームの開始点を決定するには、 getStartDate() メソッドを使用することができます。

disablePictureInPicture 

ブラウザーにピクチャインピクチャのコンテキストメニューを表示させないようにしたり、場合によっては自動的にピクチャインピクチャを要求しないようにします。

disableRemotePlayback 

論理属性で、有線 (HDMI, DVI など) や無線 (Miracast, Chromecast, DLNA, AirPlay など) を使用して接続された端末のリモート再生機能を無効にするために使用されます。

Safari では、代替として x-webkit-airplay="deny" を使用することができます。

duration （読取専用）

倍精度浮動小数点値で、メディアのタイムライン上でのメディアの再生時間 (全長) を秒単位で示します。要素にメディアが存在しない場合、またはメディアが有効でない場合は NaN が返されます。メディアの終了時刻が不明な場合 (持続時間不明のライブストリーム、ウェブラジオ、 WebRTC からのメディア受信など)、この値は +Infinity になります。

height

映像の表示領域の高さを、 CSS ピクセル値で指定します。 (絶対値に限ります。パーセント値は不可。)

intrinsicsize 

この属性はブラウザーに、画像の固有の寸法を無視し、この属性で指定された寸法であると見せかけるよう指示します。特に、画像がこれらの次元のラスターであって、画像の naturalWidth/naturalHeight はこの属性で指定された値が返されます。

loop

論理型の属性です。指定された場合、ブラウザーは映像の末尾に達すると、自動的に先頭に戻ります。

muted

論理型の属性で、映像に含まれる音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は false であり、映像再生時に音声も再生することを表します。

playsinline

論理属性で、映像を「インライン」で再生する、すなわち要素の再生領域内で再生するかを指定します。この属性がないことが、映像を常に全画面で再生するという意味ではないことに注意してください。

poster

映像のダウンロード中に表示される画像の URL です。この属性が指定されない場合、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームをポスターフレームとして表示します。

preload

列挙型の属性で、映像が再生される前に、どのコンテンツを読み込むとユーザーに最高の使い勝手をもたらすかについての作者の考えを、ブラウザーに対するヒントとしてを提供するためのものです。以下の値のうちひとつを持つことができます。

• none: 映像を事前に読み込むべきではないことを示します。
• metadata: 映像のメタデータ (例えば、長さ) を読み込みます。
• auto: ユーザーが映像ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。
• 空文字列: これは auto 値と同義です。

既定値はブラウザーごとに異なります。仕様書では metadata を設定するよう助言しています。

注:　autoplay 属性は preload より優先します。autoplay を指定すると、言うまでもなくブラウザーは映像を再生するためにダウンロードを始めなければなりません。

src

埋め込む映像コンテンツへの URL を指定します。この属性は省略可能です。埋め込む映像の指定には、video 要素のブロック内で <source> を使用することもできます。

width

映像の表示領域の幅を、 CSS ピクセル値で指定します。 (絶対値に限ります。パーセント値は不可)。

以上、<video>タグの属性でした。

主に使いそうなのは、autoplay、controls、muteあたりかなという印象ですが、ほかのも使えるように試してみようと思います。