HTML５ Video Player スクロール表示してから自動再生

html5_video_player

 

 HTML5標準のVideoPlayerを使うと、簡単に動画を埋め込める。

 

基本使用例

<video src="test.mp4"></video>

 

もしくは、

 

<video>
  <source src="test.wmv">
  <source src="test.mp4">
</video>

 

対応していないブラウザにメッセージを出す場合、以下のように出来る。

 

<video src="test.mp4">
  <p>動画の再生に対応したブラウザをインストールしてください。</p>
</video>

 

 

属性

属性を指定することで、細かい設定が可能。

 

src 動画ファイルのソース。複数のファイルタイプを指定する場合は下記のようにタイプ毎に指定。
‘mp4′,’m4v’,’webm’,’ogv’,’wmv’,’flv’
controls コントローラーの表示・非表示
playsinline 動画を「インライン」で再生する
poster 代替画像を指定
loop “off” （デフォルト）
“on” （ループ再生）
autoplay “off” （デフォルト）
“on” （再生準備ができ次第再生）
muted 初期の音声をミュートする
preload “metadata” （デフォルト：ページ読み込み時にメタデータだけを読み込む）
“none” （ページ読み込み時に動画を読み込まない）
“auto” （ページ読み込み時に動画全体を読み込む）
width メディアの幅を指定（初期値でメディアの幅が自動検出）
height メディアの高さを指定（初期値でメディアの高さが自動検出）

 

※autoplayを設定した場合、ブラウザの仕様上、mutedも設定しないと自動で再生されない。

※Iphoneなど、一部のブラウザで自動再生できない場合がある事、レスポンシブに対応する事が多いことにより、playsinlineは必須。

 

自動再生の実用サンプル

HTML

<video muted loop playsinline src="test.mp4"></video>

 

CSS

video{
  width:800px;
  max-width:100%;
}

 

 

スクロールして表示したときに自動再生を始める

ページの下部の方に動画を埋め込む事になった場合で自動再生したい場合、そのままだとページが読み込まれた時点で再生開始されてしまって見られない。

スクロールして動画が表示されたタイミングで再生開始したい場合、JavaScriptで制御する。

 

HTML

<div class="js_video">
  <video muted loop playsinline src="1.mp4"></video>
</div>

 

CSS

.js_video{
	width: 100%;
	text-align:center;
}

.js_video video{
	width: 800px;
	max-width:100%;
}

 

JavaScript

// ページの読み込みが完了したときに実行する関数を設定
window.addEventListener(
  "load",
  function () {
    // 動画を再生する関数を定義
    function playVideos(videoWrappers) {
      // 動画が再生される位置を計算する
      const startPosition = window.pageYOffset + window.innerHeight;
      // 全ての動画ラッパーに対して処理を繰り返す
      for (let i = 0; i < videoWrappers.length; i++) {
        // 動画の位置を取得
        const videoPosition =
          videoWrappers[i].getBoundingClientRect().top + window.pageYOffset;
        // 動画が再生される位置までスクロールした場合、動画を再生する
        if (startPosition > videoPosition) {
          const video = videoWrappers[i].getElementsByTagName("video");
          video[0].play();
        }
      }
    }
    // クラス名が"js_video"である要素を取得
    const videoWrappers = document.getElementsByClassName("js_video");
    // クラス名が"js_video"である要素が存在する場合
    if (videoWrappers.length) {
      // 動画を再生する関数を実行
      playVideos(videoWrappers);
      // スクロール時に動画を再生する関数を実行するリスナーを設定
      window.addEventListener(
        "scroll",
        function () {
          playVideos(videoWrappers);
        },
        false
      );
    }
  },
  false
);