HTML5ビデオのコントロール

PR TIMESのサービス説明ページではHTML5を使って動画を埋め込んでいます。
しかしただ埋め込んだだけでは、垂れ流しとなり動画を適切に見てもらうことができません。
そこでjavascriptなどから動画を制御することで、他のコンテンツを見るときの邪魔にならず、また閲覧者に適切に見てもらえるようにしました。

まずvideoタグを使って動画を埋め込みます。
このときにidを忘れずに設定しましょう。
Videoタグ非対応のブラウザでは、objectタグを挟むことによって動画を表示させることができます。

<video width="1600" height="550" id="prvideo" autoplay loop poster="video.jpg">
<source src="video.webm" type='video/webm;codecs="vp8,vorbis"' />
<source src="video.mp4" type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"' />
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="1600" height="550" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
  <param name="src" value="video.mp4">
  <param name="controller" value="false">
  <param name="autoplay" value="true">
  <embed src="video.mp4" width="1600" height="550" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>
</video>

さて、ここからが本題です。
javascriptからはidを指定して、動画要素にアクセスすることができます。
jQueryを使うと以下のようなコードになります。

var video;
$(window).ready(function() {
  video = $("#prvideo")[0];
});

まずはウィンドウをスクロールして動画が画面外に消えた時も再生したままでは、見ていないのに負荷が増えるだけなので一時停止しましょう。

window.onscroll = function(){
  if($(window).scrollTop() > 150){
    //150ピクセル分スクロールしたら動画を一時停止
    if(!video.paused){
      video.pause();
    }
  }else{
    //上部に戻ってきたら動画を再開
    if(video.paused){
      video.play();
    }
  }
}

さらに別のページを見るために他のタブを開いたりしたときも再生が続いていると（特に音声が流れているときは）邪魔なので、停止しましょう。
Page Visibility APIというページの表示状態を取得するAPIを使います。

document.addEventListener('webkitvisibilitychange', function(){
  if ( document.webkitHidden ) {
    //別のタブを開いたとき動画を止める
    if(!video.paused){
      video.pause();
    }
  } else {
    //このタブに戻ってきたら動画を再開
    if($(window).scrollTop() < 150){
      video.play();
    }
  }
}, false);

webkitHiddenでページが表示されているかどうかを取得できるので、背面に隠れてしまった時には動画を停止します。
Page Visibility APIのブラウザ対応状況はこちら。

ちなみにYoutubeから埋め込んだ動画でも以下のコードで制御することが可能です。

<div id="prvideo"></div>

var video;
var playing;

$(window).ready(function() {
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});

function onYouTubeIframeAPIReady() {
  video = new YT.Player('prvideo', {
    height: '550',
    width: '1600',
    videoId: '動画のID',
    playerVars: {rel: 0},
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
}

function onPlayerStateChange(event) {
  switch(event.data){
    case YT.PlayerState.PLAYING:
      playing = true;
      break;
    case YT.PlayerState.PAUSED:
      playing = false;
      break;
  }
}

window.onscroll = function(){
  if($(window).scrollTop() > 150){
    //150ピクセル分スクロールしたら動画を一時停止
    if(playing){
      video.pauseVideo();
    }
  }else{
    //上部に戻ってきたら動画を再開
    if(!playing){
      video.playVideo();
    }
  }
}

document.addEventListener('webkitvisibilitychange', function(){
  if ( document.webkitHidden ) {
    //別のタブを開いたとき動画を止める
    if(playing){
      video.pauseVideo();
    }
  } else {
    //このタブに戻ってきたら動画を再開
    if($(window).scrollTop() < 150){
      video.playVideo();
    }
  }
}, false);

動画を埋め込むときは、垂れ流しではなく適切に制御して閲覧者の負荷をなるべく減らすようにしましょう。