https://hmaster.net/

当サイトについて | リンクについて | 問い合わせフォーム |

HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する方法を分かりやすく解説しているサイトです。初心者向けに見やすい、読みやすい作りになっています。

動画を再生する

<video src="動画ファイル"></video>で動画を再生できます。
videoタグには以下のような属性を加えることができます。

属性	説明
poster="画像ファイル名"	動画の開始画面の画像を設定する
preload	読み込むタイミングを指定する preload="none"・・・・・・先に読み込まないようにする preload="auto"・・・・・・ページを読み込んだ時に動画を読み込むようにする preload="metadata"・・・・・・メタデータのみ先に読み込む
playsinline	モバイルでのインライン再生を可能にする。フルスクリーン表示にならないで再生できる autoplay、muted属性とセットで記述する必要がある
width	動画の横幅を指定する
height	動画の高さを指定する
autoplay	動画を自動で再生する
loop	動画を繰り返して再生する
muted	消音にする
controls	コントローラを表示する
crossorigin	別のオリジンから読み込んだ画像や動画ファイルなどをページで利用する際のルールを指定します。オリジンとはhttp://×××.net:80（ポート番号）で例えると http://×××.net:80・・・赤色部分がドメイン http://×××.net:80・・・赤色部分がオリジンとなります。また、別のオリジンとは http://×××.net/aaa.html https://×××.net/bbb.html のようにスキーム名（http://やhttps://の部分）が異なるためbbb.htmlの方は別のオリジンとなります。 crossorigin="anonymous"でユーザ認証はしない、crossorigin="use-credentials"でユーザ認証をするという意味になります。

【ブラウザ表示】


開始画面を表示	自動再生

繰り返し再生する	スマホでのインライン再生

消音	コントローラーを表示

ソース

<video src="cat.mp4" width="300" height="200" poster="./image/catvideo_thumbnail.gif"></video>
<video src="cat.mp4" width="200" height="100" autoplay></video>
<video src="cat.mp4" width="200" height="100" loop controls></video>
<video src="cat.mp4" width="200" height="100" playsinline autoplay muted></video>
<video src="cat.mp4" width="200" height="100" muted controls></video>
<video src="cat.mp4" width="200" height="100" controls></video>

HTML5のタグ一覧

HTMLタグ一覧

Follow @hp_master_2003