【videoタグ】HTMLで動画再生プレイヤーを使ってみよう！「HTML・解説・初心者向け」- ノブレコ
nobreco
★<video>タグの特徴
・タグのカテゴリ ―― インライン要素。
・コンテンツモデル ―― フローコンテンツ・フレージングコンテンツ・エンベディッドコンテンツ。（controls属性を持つ場合は、インタラクティブコンテンツとパルパブルコンテンツを含む）
・タグの省略 ―― 不可。（開始タグと終了タグが必要）
・使用可能な親要素 ―― エンベディッドコンテンツを許容するすべての親要素。
・グローバル属性を持つ。
・ARIAロール ―― 標準でのARIAロールは無し。
<video>の説明
<video>とは
ここで言うvideoとは、動画データを取り扱うことを指します。
映像を表すための要素ですが、これらの総称として「メディア要素」と呼ばれることもあります。
HTML文書の埋め込みコンテンツとして、HTML5から導入されました。
■使用目的
映像コンテンツを埋め込んで再生するために使用します。
動画をそのまま埋め込むだけではなく、属性を使って、自動再生、ループ、コントロールパネルの表示、表示したい幅や高さなどを調整することもできます。
シンプルな使い方は、<video>の開始タグ内に、src属性を指定して使いたい動画のURLを記述します。（ただしこのままでは動画は再生されません）複数の動画リソースの候補を指定したい場合は、source要素とsrc属性を使って複数のURLをそれぞれに記述していく方法があります。
またcotrole属性を付け加えることで、再生ボタンや再生位置、ボリュームなどのインタラクティブに対応した表現が可能になります。これで初めて動画としての基本的な機能が備わると思ってください。
動画画面がオーバーサイズにならないよう、CSSで セレクタ｛ width: 100%; max-width: 350px;（pxの数値は任意）｝などを指定しておくと便利です。
■使われる属性
・autoplay
・auto picture inpicture
・controls
・controles list
・crossorigin
・disable picture inpicture
・deisable remoteplayback
・height
・loop
・mured
・play sinline
・poster
・preload
・src
・width
使用上の注意点
① 古いブラウザではサポート対応されていないことがある。
サポートされていない環境にも対応したいのであれば、<source>要素とsrc属性で再生可能な候補を複数用意するなど配慮する必要があります。これにより対応形式に合わせてフォールバック（縮退運動）させることができます。
加えてtype属性の属性値に、MIMEタイプの種類やコーデックスを指定しておくとよいでしょう。
② youtubeなどの、すでにwebサイトに埋め込まれているような動画は、<iframe>要素で表現する。
③ ファイルサイズはなるべく小さくする。
ファイルサイズが大きすぎると、サーバーの転送量の増加や通信速度のパフォーマンスの低下につながります。動画を埋め込む際は、余分な尺は編集で切るか、画質を下げて容量を少なくするなどの配慮も考えましょう。
再生時間が長く、高画質な映像を埋め込みたいのであれば、外部サービスの利用も検討しましょう。
④ スマートフォンでは自動再生できない。
内容モデル
<video>要素の内容モデルは、「transparent」（透過的コンテンツ）です。
src属性を持つのと、持たないの二つのモデルがあります。
src属性がある場合、０個以上の<track>要素、それに続くメディア要素を含まないtransparentです。
src属性が無い場合、０個以上の<source>要素、０個以上の<track>要素、それに続くメディア要素を含まないtransparentです。
transparent（メディア要素内）には、フォールバックコンテンツを入れることができ、<source>要素で複数の音声や動画形式のリソース候補の指定が可能です。
※ この要素はメディア要素である<video>と<audio>要素を子要素にはできません。
アクセシビリティでの注意点
<video>要素は、標準でのARIAロールを持っていません。
技術支援でメディア要素の利用は可能ですが、ユーザー環境によっては映像や音声が再生されなかったり、再生されてもその情報が受け取れない場合があります。
この解決策として、<track>要素を使ってテキスト情報で提示させる方法があります。
この要素で、再生位置などのタイミングに合わせて、字幕やキャプションといったテキストトラックを表示することが解決方法として望ましいでしょう。
<video>の記述例
■mp４形式を使った基本的な記述例
★HTML
色々な属性が付いていますが、とにかくまずは動画を再生させたいという方は、src属性で値にURLや相対パスをコピーなどして貼り付けます。続いて、属性でcontrolsを記述します。
基本的な動画の埋め込みは以上でできます。
動画画面の表示サイズを変更したい場合は、width属性やheight属性で数値を指定やればOKです。動画をレスポンシブ対応させて表示したい場合には、CSSでサイズ調整をするほうが良いです。
コントロールパネルがないと動画は静止画のままで再生できないので、基本的には<video>要素に、動画のパスを記述するsrc属性と、コントロールパネルを付けるcontrols属性は必要です。
★実行結果
このように動画の表示に成功しました。
■複数の動画形式を入れておいた例
★HTML
<video>要素は、transparentモデルですので、中に<source>要素を複数用いることで、フォールバックコンテンツとして記述することができます。
これにより、上から順に、1番目のmp４形式の動画が実行できなかったときは、2番目のwebm形式を選択し、それでもダメなら3番のogg形式を選択するというように対応する形式が見つかるまで選択肢を絞り込んでいくような構造をつくることができます。これは可能性がある限りいくらでも入れてかまいません。
それでも対応していない場合に、最後にテキストメッセージで結果通知されるようにしておくといいです。
記述しているフォールバックコンテンツに対応している形式であれば動画は再生されますが、そうでない場合はテキストで表示結果が伝えられます。
まとめ
この記事では、<video>タグについての解説をいたしました。
基本的な使い方は、<img>要素と通じるところがありシンプルですが、対応環境に合わせたやり方や、アクセシビリティ上の注意、属性を指定した場合の使用規制などを含めるとなかなか奥が深い要素となっています。
始めは難しく考えずに、自身のサイトページに動画を埋め込んで再生できるようにしてみるということから始めてみといいでしょう。それから順を追って必要に応じた仕様を学んでいけばよいと思います。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん(^///^)
