videoタグでの動画再生サンプル

See the Pen videoタグでの動画再生サンプル by takapen (@takapen) on CodePen.

.video-wrap {
  margin-bottom:1000px;
  width:200px;
  position: relative;
}
.video-btn {
  content: "";
  position: absolute;
  top:20%;
  left:0;
  right:0;
  bottom:30%;
  cursor: pointer;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

$(function(){

  var videoWrap = $('.video-wrap');
  var videoMain = $('.video-main');
  var video_btn = $('.video-btn');

  videoMain.on('play',function(){
    var videoId = $(this).data('video-id');
    console.log(videoId + ',' + 'play');
  });

  videoMain.on('pause',function(){
    var videoId = $(this).data('video-id');
    var videoPauseNow = Math.round($(this).get(0).currentTime);
    var videoPauseAll = Math.round($(this).get(0).duration);
    if (videoPauseNow != videoPauseAll) {
      console.log(videoId + ',' + 'pause' + ',' + videoPauseNow + ' seconds passed');
    }
  });

  videoMain.on('ended',function(){
    var videoId = $(this).data('video-id');
    console.log(videoId + ',' + 'end');
    $(this).next(video_btn).removeClass('_playDone');
  });

  video_btn.on('click', function () {
    if ( !$(this).hasClass("_playDone") ){
      $(this).prev(video).get(0).pause();
      $(this).addClass('_playDone');
    } else {
      $(this).prev(video).get(0).play();
      $(this).removeClass('_playDone');
    }
  });

});