Web動画埋め込みについて

サイトへの動画の掲載は「YouTube」が高機能で便利で簡単ですが、2021年6月から埋め込み動画にもインストリーム広告（再生画面内の広告）を表示することになったそうなので、YouTubeなどの外部サービスを使わない方法を試しました。
（ただ、今まで利用した沢山のYoutube埋め込み動画がどうなるか心配していたのですが、広告が出た所をいまだに見たことありませんが……）

埋め込み動画上の広告（YouTubeヘルプ）

動画埋め込み比較

14.9MBの動画を、YouTubeとvideoタグの2種類の方法で埋め込んでみます。

（ネコちゃんの動画は、フリー素材コミュニティサイトの「Pixabay」でお借りしました。）

YouTube

videoタグ（html5）

回線速度70Mbps(PC)と20Mbps(スマホ)で見たところ、
14MB程度であれば、問題なく再生できました。最初の読み込み時間も大差ありません。
このページには埋め込んでいませんが、140MBの動画でも普通に再生できました。

※videoの方は、Safariでサムネイルが表示されないので、posterを設定するか、ファイル名のすぐ後ろに続けて「#t=0.001」を記述しておくと見えます。

videoタグで動画を埋め込む場合の注意点

• Webサーバに動画データを持つ事になり閲覧時に負荷がかかる。（データやユーザが多い場合はサーバスペックに注意）
  （今回「複数の大容量動画を多数のユーザが閲覧する」状況のテストはできていません）
• YouTubeの様に自動で環境に合わせた適切なサイズで再生されない。（ユーザのスマホデータ通信量を沢山消費してしまったり、遅い回線の場合はスムーズに再生できないかも。）
• htmlソースの見方が分かる人なら、元の動画ファイル（主に.mp4）がダウンロードできる。

などでしょうか。

• シェア
• Tweet