見出し画像
Photo by 658091103

HTMLに動画を埋め込む方法

Suirunakamura

「HTMLに動画を埋め込む方法」
・iframeタグを使用する（youtubeなどの動画サイトから読み込む）
・videoタグを使用する（動画ファイルをアップロードして読み込む）

videoタグの使用方法
・mp4, webmなどの動画ファイルの読み込みで動画を表示
<video src="~~"></video>
属性一覧
・controls コントロールパネルを表示する 再生ボタン 再生 ボリューム
・auto 自動再生
・loop 繰り返し再生
・poster 開始画面の画像を設定
・playsinline インライン再生を可能にする
スマホのsafariでwebサイトの動画の埋め込まれている動画を再生しようとすると強制的に全画面表示になってしまうことがある。
全画面表示をせずにその場で再生させることができるのがインライン再生
・インライン再生を可能にするには、autoplay, muted, playsinline 三つの属性が必要になる。
どれか一つでもかけているとうまくインライン再生されないので注意する。
・width/height 横幅と高さを指定する
・preload 動画の読み込み設定
webサイトを読み込む時に、事前に動画ファイルをDLするかを指定する。
none: 事前のファイル読み込みを禁止
metadata: 長さやファイルサイズなどのメタ情報（動画の情報）だけを読み込む
auto: 初期値：動画ファイルを事前にダウンロードする
・複数の形式の動画を読み込む
mp4で動画が再生されない時のことを考えて複数形式の動画をあらかじめ用意しておく。（セーフティネット）
１「mp4」を読み込む
２ だめなら「webm」を読み込む
３それでもダメなら「ogg」
４それでもダメなら「エラーメッセージ」を表示する
youtubeなどの動画サービスを埋め込む
・iframeタグを使用する。
１youtubeの動画の「共有」から「埋め込む」を選択
２埋め込むためのコードが表示されるのでコピーしてhtmlに貼り付けるだけでOK

・Videoタグで動画が再生されない３つの、ケースと解決策
・androidで動画が再生できない
「Basic認証」でwebページにアクセスできる人を「ユーザーパスワード」を用いて制限するという機能がある。
そのBasic認証がかかったページをandroidで閲覧すると動画を見ることができない。
・mp4なのに再生できない
mp4でも「コーデック」といい、圧縮のデータ方式が異なるので
コーデックを確認して「AVC形式」「H.265形式」でmp4を経て書き出す
・IEでvideoタグが使えない場合
IZE8以前では「videoタグ」が使用できないので「html5media.js」を使用する
<head>タグの中にする文言が、ある

背景に動画を表示する方法
・要素いっぱいに動画のサイズを広げて、文字の入ったdiv要素をabsoluteで、浮かせて動画の上に載せるイメージ


iframe
・weサイトの中で別のwebサイトを埋め込むことができる（other youtube and google maps）
・iframeの装飾は、枠のデザインしかできず、読み込んだページのデザインを変えるにはJSを使用
・iframeを使うと少ないスペースにたくさんの情報をスクロールすることで読みこみ可能。
ただこれは目的の情報に辿り着きにくくなる。
・CSSのoverflowプロパティでは擬似的にフレームを作ることができるの

この記事が気に入ったらサポートをしてみませんか？