↑↑↑↑自動再生＆無音モード

今では、すっかり標準になっているHTML5では、動画を簡単に再生させることができます。

Youtubeなどにアップロードされている動画を埋め込むということではありません。

自分のサーバーにアップロードした画像を表示するのと同じ感覚で、サーバーにアップロードした動画を再生する方法です。

使用するのは、videoタグです。

書き方は、

<video src=”動画のURL”>メッセージ</video>

「メッセージ」の部分には、動画が再生されない時、動画を表示する代わりにメッセージを表示します。

例えば、こんな感じです。

<video src=”動画のURL”>
<p>このブラウザでは、動画が再生できません。</p>
</video>

また、sourceタグを使うと、再生する動画の候補を複数指定することができ、複数の中から再生できる動画を見つけて再生してくれます。

<video>
<source src=”動画1のURL”>
<source src=”動画2のURL”>
</video>

 

videoタグには、9つの属性が指定できます。

autoplay：自動再生

<video autoplay><source src=”動画のURL”></video>

ページを開くと自動的に動画が再生されます。

 

controls：再生ボタン、ボリュームなどインターフェイスの表示

<video controls><source src=”動画のURL”></video>

 

height：動画の高さを指定

<video height=”300″><source src=”動画のURL”></video>

※通常はwidthと共に使用しますが、heightだけを指定した場合、動画の縦横比は、維持されます。

 

loop：繰り返し再生

<video loop><source src=”動画のURL”></video>

 

muted：ミュート(無音)設定

<video muted><source src=”動画のURL”></video>

 

poster：動画再生前に表示される画像

<video poster=”画像のURL”><source src=”動画のURL”></video>

※動画と異なる縦横比の画像を指定すると、上のように、動画の再生領域を覆いきれない状態になります。
   再生される動画と同じサイズの画像を指定するときれいに表示されます。

 

preload：動画ファイルの読み込み指示

<video preload=”auto”><source src=”動画のURL”></video>

ページを読み込んだ時点で動画データをバックグラウンドで読み込みます。

これにより、スタートボタンを押した時、動画の再生がスムーズに始まります。

ただし、preloadを指定しない場合、preload=”auto” と同じ動きになります。

動画の再生は、ほとんどしない場合などは、preload=”none” とします。

また、preload=”metadata” を指定すると、動画全体ではなく、 動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみを取得します。

 

src：動画ファイルの指定

<video src=”動画のURL”></video>

または、

<video><source src=”動画のURL”></video>

動画のURLを絶対パス、または相対パスで指定します。

 

width：動画の幅

<video width=”600″><source src=”動画のURL”></video>

※通常はheightと共に使用しますが、widthだけを指定した場合、動画の縦横比は、維持されます。

Amazonプライム会員なら無料で読めるビジネス書4選

上を目指すために読んでおきたい8冊

 

私が買ってよかったパソコン＆iPhone関連商品 トップ8