カテゴリー

キーワード

 
> video要素の属性を紹介します...

video要素の属性を紹介します【HTML5 実践編】


2015 年 3 月 2 日 投稿    view: 9192
タグ:
このエントリーをはてなブックマークに追加

video要素 属性紹介

こんにちは、WEBマーケティング部の杉尾です。


前回に引き続き、HTML5のvideo要素についてお話しさせていただきます。


前回の記事はコチラです。


まず、ソースコード

前回できあがったソースコードはこちらです。
主要ブラウザの最新バージョンとIE6~IE8にも対応可能です。


<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
    <script src="//api.html5media.info/1.1.8/html5media.min.js"></script>
<![endif]-->
</head>
<body>
    <article>
        <video src="sample.mp4" type="video/mp4" controls width="240" height="180">
            <p>video要素がサポートされていないブラウザでご覧になっています。</p>
        </video>
    </article>
</body>
</html>

属性一覧表

前回はコードを完成させるところまで進みました。
今回はコードの解説と、属性について紹介します。


属性 意味
autoplay (autoplay) 省略可能 自動的に再生を開始
controls (controls) 省略可能 コントローラーを表示
loop (loop) 省略可能 ループ再生を行う
mediagroup="" 文字列(属するグループ名) 複数のメディアファイルをグループで取り扱うときのグループ名を指定
preload=""

"auto" 事前に読み込む

"none" 事前に読み込まない

"metadata" メタデータだけ読み込む

ページ表示時に動画ファイルを読み込むかどうかの設定
(autoに関してはブラウザ依存なので、事前に読み込んでもよいというくらいの設定です)

src="" URL 動画ファイルのURL
height="" 数値 要素の高さ
width="" 数値 要素の幅
poster="" URL ブラウザが表示可能な形式の動画ファイルがない場合、表示する画像のURL
muted (muted) 省略可能 音を出さない
crossorigin=""

"anonymous" 認証情報を使用しない

"use-credintials" 認証情報を使用する

他サイトのファイルを読み込むとき認証情報をどうするか

値のところに『省略可能』の記述があるものは、videoタグ内にそれぞれの『属性』のみを指定するだけで反映されます。


autoplay属性が指定されている場合、preload属性が指定されても無効になります。


【使用例】

  <!DOCTYPE html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
    <script src="//api.html5media.info/1.1.8/html5media.min.js"></script>
<![endif]-->
</head>
<body>
    <article>
        <video src="sample.mp4" type="video/mp4" controls muted autoplay loop width="240" height="180">
            <p>video要素がサポートされていないブラウザでご覧になっています。</p>
        </video>
    </article>
</body>
</html>

デモはこちら

ページを開いたら動画が自動で繰り返し再生されます。音は出ません。


【追記】:スマホ(特にiOSのSafari)ではpreloadやautoloadは効きません。(※Javascriptによる指定があれば可能です)
これはユーザーが自動で大容量のデータを受信しないようにするためです。

Appleのデベロッパーライブラリにも記載があります。


まとめ

2回に分けてvideo要素の説明をさせていただきました。
メディア要素はHTML5で新しく追加された目玉要素ですから、しっかり覚えたいですよね。


次回こそ、YouTube動画の埋め込みを紹介します。

【3/5 追記】YouTube動画の埋め込み記事を書きました。⇒ YouTube動画を埋め込む方法とカスタムオプションを13コ紹介します


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事