adbanner-test/app/views/admin/ad_images/_jplayer.html.erb

<%= javascript_include_tag "banner/jplayer_front" %>
<style type="text/css">
@media screen and (max-width: 500px) {

    /* jplayer */
    .jp-video video, .jp-audio, .jp-controls-holder {
        width: 100% !important;
    }

   .jp-video-360p {
       max-width: 570px !important;
   }

   .jp-video-270p {
       max-width: 480px !important;
   }

   .jp-progress {
       width: 130px;
   }

}
.jp-interface{
  bottom: 0;
  height: 6em;
  position: absolute;
}
.jp-video-play,.jp-jplayer{
  height: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 6em;
}
.jp-gui{
  width: 100%;
  height: 100%;
}
.jp-jplayer{
  width: 100%;
  position: absolute;
  overflow: hidden;
  clip-path: 0 0;
  box-sizing: content-box;
  transform: translatez(0);
}
.jp-type-single{
  position: relative;
  height: 100%;
}
.jp-video{
  width: 100%;
  height: 100%;
}
[id^="jp_video_"]{
  box-sizing: content-box;
  position: absolute;
  top: -100%;
  bottom: -100%;
  left: -100%;
  right: -100%;    
  margin: auto;

  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: translatez(0);
}
.jp-video.hide-ui .jp-jplayer,.jp-video.hide-ui .jp-video-play{
  padding-bottom: 0em;
}
.jp-video.hide-ui .jp-gui{
  display: none;
}
.jp-video.hide-ui [id^="jp_video_"]{
  cursor: none;
}
.jp-video.hide-ui.auto_play [id^="jp_video_"]{
  cursor: default;
}
.jp-no-solution
  position: absolute;
  width: 100%;
  display: block;
}
</style>
<div id="jp_container_<%= i %>" class="jp-video hide-ui<%= " auto_play" if @autoplay_video%>" role="application" aria-label="media player">
  <div class="jp-type-single">
    <div id="jquery_jplayer_<%= i %>" class="jp-jplayer"></div>
    <div class="jp-gui">
      <div class="jp-video-play">
        <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
      </div>
      <div class="jp-interface">
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
        <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
        <div class="jp-controls-holder">
          <div class="jp-controls">
            <button class="jp-play" role="button" tabindex="0">play</button>
            <button class="jp-stop" role="button" tabindex="0">stop</button>
          </div>
          <div class="jp-volume-controls">
            <button class="jp-mute" role="button" tabindex="0">mute</button>
            <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
            <div class="jp-volume-bar">
              <div class="jp-volume-bar-value"></div>
            </div>
          </div>
          <div class="jp-toggles">
            <button class="jp-repeat" role="button" tabindex="0">repeat</button>
            <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
          </div>
        </div>
        <div class="jp-details">
          <div class="jp-title" aria-label="title">&nbsp;</div>
        </div>
      </div>
    </div>
    <div class="jp-no-solution">
      <span>Update Required</span>
      To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    </div>
  </div>
</div>
<script type="text/javascript">
  if (typeof(get_video_type)=='undefined'){
    function get_video_type(file_name){
      var type;
      if(file_name){
        if(file_name.match(/\.(ogg|ogv)/)){
          type = "ogv";
        }else if(file_name.match(/\.webm/)){
          type = "webmv";
        }else{
          type = "m4v";
        }
        return type;
      }else{
        return "";
      }   
    }
  }
  var play_<%= i %>_flag = false;
  function ad_call_on_play_jplayer_<%= i %>(ele){
    var cyclediv = $(ele).parents("div.cycle-slideshow").eq(0);
    if(cyclediv.length == 1){
      cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
      var widget = cyclediv.parents('.w-ba-banner').eq(0);
      widget.find(".pause-slide").trigger('click');
      widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','hidden');
      //$(ele).jPlayer("pauseOthers");
      hide_jplayer_ui_<%= i %>(ele);
    }

  }
  function ad_call_on_pause_jplayer_<%= i %>(ele){
    var cyclediv = $(ele).parents("div.cycle-slideshow").eq(0);
    if(cyclediv.length == 1){
      var widget = cyclediv.parents('.w-ba-banner').eq(0);
      if(cyclediv[0].need_resume){
        widget.find(".resume-slide").trigger('click');
      }
      widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','');
      hide_jplayer_ui_<%= i %>(ele);
    }
  }
  function hide_jplayer_ui_<%= i %>(ele) {
    var jpalyer_video = $(ele).parents('.jp-video').eq(0);
    jpalyer_video.find(".jp-gui").css("display","");
    jpalyer_video.addClass('hide-ui');
  }
  function show_jplayer_ui_<%= i %>(ele) {
    <% unless @hide_video_tools %>
    var jpalyer_video = $(ele).parents('.jp-video').eq(0);
    jpalyer_video.removeClass('hide-ui');
    <% end %>
  }
  function click_jplayer_<%= i %>(){
    $("#jp_container_<%= i %> .jp-video-play").css('display','')
    if (play_<%= i %>_flag){
      $("#jquery_jplayer_<%= i %>").jPlayer("pause");
    }else{
      $("#jquery_jplayer_<%= i %>").jPlayer("play");
    }
    <% unless @hide_video_tools %>
    $(this).parents('.jp-video').eq(0).removeClass('hide-ui');
    <% end %>
  }
  function jplayer_center_video_front(ele){
    /*
    $(ele).css('margin-left',-Math.abs($(ele).parent().width()-$(ele).width())/2);
    if($(ele).parents('.w-ba-banner').length>0){
      var p_h = $(ele).parents('.w-ba-banner').eq(-1).height();
      var h = ele.videoHeight || $(ele).height();
      $(ele).height()
      $(ele).css('margin-top',-Math.abs(p_h-h)/2);
    }
    $(ele).css('transform','unset');
    */
  }
  $(window).resize(function() {
    $('.w-ba-banner video[id^=jp_video_]').each(function(){
      jplayer_center_video_front(this);
    });
  })
  if (typeof(default_video_data)=='undefined'){
    var default_video_data = {
      cssSelectorAncestor: "#jp_container_<%= i %>",
      ready: function () {
        $(this).jPlayer("setMedia", {
          title: "Big Buck Bunny Trailer",
          m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
          ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
          webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
          poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
        })
      },
      play: function() { // To avoid multiple jPlayers playing together.
        play_<%= i %>_flag = true;
        ad_call_on_play_jplayer_<%= i %>(this);
        jplayer_center_video_front($(this).find('video'));
        <% if @hide_video_tools %>
        ad_audio_button(this,false);
        <% end %>
        var is_frontend = <%= @is_frontend ? true : false %>;
        if(is_frontend){
          var cyclediv = $(this).parents("div.cycle-slideshow").eq(0);
          cyclediv.css("padding-bottom",'');
          if(cyclediv.height() == 0 || cyclediv.data("auto-height")){
            cyclediv.data("auto-height",true);
            var video_block = cyclediv.find('video')[0];
            if(video_block != undefined){
              cyclediv.height(cyclediv.width() * video_block.videoHeight / video_block.videoWidth);
              if(!(cyclediv.data("bind-resize"))){
                cyclediv.data("bind-resize",true);
                $(window).resize(function(){
                  cyclediv.height(cyclediv.width() * video_block.videoHeight / video_block.videoWidth);
                })
              }
            }
          }
        }
      },
      click: function(){
        click_jplayer_<%= i %>();
      },
      pause: function(){
        play_<%= i %>_flag = false;
        $(this).jPlayer("pause");
        ad_call_on_pause_jplayer_<%= i %>(this);
        window.console.log("pause");
        ad_audio_button(this,true);
      },
      abort: function(){
        play_<%= i %>_flag = false;
        <% unless @hide_video_tools %>
        $(this).parents('.jp-video').eq(0).removeClass('hide-ui');
        <% end %>
        window.console.log("abort");
      },
      ended: function(){
        play_<%= i %>_flag = false;
        <% unless @hide_video_tools %>
        $(this).parents('.jp-video').eq(0).removeClass('hide-ui');
        <% end %>
        <% if @apply_autoplay_script %>
        var is_frontend = <%= @is_frontend ? true : false %>;
        var cyclediv = $(this).parents("div.cycle-slideshow").eq(0);
        var autoHeight = cyclediv.data("auto-height");
        if(!is_frontend || (is_frontend && cyclediv.find('[data-autoplay=1]').length != 0)){
          cyclediv.cycle("pause").cycle("next");
          var current_cycle = cyclediv.find(".cycle-slide-active");
          if(current_cycle.hasClass("jplayer_slide")){
            var $video_ele = current_cycle.find('.jp-jplayer video');
            if ($video_ele.length>0){
              $video_ele.eq(0).attr('muted','muted').attr('autoplay','autoplay').attr('playsinline',true);
            }
            current_cycle.find('.jp-jplayer').jPlayer("mute", true).jPlayer("play",0);
          }
          else if(current_cycle.find('iframe').length>0){
            current_cycle.find('iframe').data("yt_player").mute().playVideo();
          }
        }
        <% end %>
        window.console.log("end");
      },
      swfPath: "/assets/banner",
      supplied: "webmv, ogv, m4v",
      globalVolume: true,
      useStateClassSkin: true,
      autoBlur: false,
      smoothPlayBar: true,
      keyEnabled: true,
      preload: 'auto',
      keyBindings: {
        play: {
          key: 80, // p
          fn: function(f) {
            if(f.status.paused) {
              f.play();
            } else {
              f.pause();
            }
          }
        },
        fullScreen: {
          key: 70, // f
          fn: function(f) {
            if(f.status.video || f.options.audioFullScreen) {
              f._setOption("fullScreen", !f.options.fullScreen);
            }
          }
        },
        muted: {
          key: 77, // m
          fn: function(f) {
            f._muted(!f.options.muted);
          }
        },
        volumeUp: {
          key: 190, // .
          fn: function(f) {
            f.volume(f.options.volume + 0.1);
          }
        },
        volumeDown: {
          key: 188, // ,
          fn: function(f) {
            f.volume(f.options.volume - 0.1);
          }
        },
        loop: {
          key: 76, // l
          fn: function(f) {
            f._loop(!f.options.loop);
          }
        }
      },
      wmode: "window",
      solution: "html, flash",
      size: {
        width: "100%",
        height: "",
        cssClass: ""
      }
    };
  }
  <% if file_url %>
  var jPlayer_<%= i %>_name = "<%= file_name %>";
  var jPlayer_<%= i %>_type = get_video_type(jPlayer_<%= i %>_name);
  var jPlayer_<%= i %>_data = {
    title: jPlayer_<%= i %>_name,
  };
  var jPlayer_<%= i %> = $.extend({},default_video_data);
  jPlayer_<%= i %>_data[jPlayer_<%= i %>_type] = "<%= file_url %>";
  <% if file_webm_url %>
  jPlayer_<%= i %>_data['webmv'] = "<%= file_webm_url %>";
  <% end %>
  <% if @file_poster %>
  jPlayer_<%= i %>_data['poster'] = "<%= @file_poster %>";
  <% end %>
  //jPlayer_<%= i %>_data["autoPlay"] = <%= @autoplay_video == true %>;
  jPlayer_<%= i %>["ready"] = function () {
    $(this).jPlayer("setMedia", jPlayer_<%= i %>_data);
    var slides = $(this).parents('.cycle-slideshow').data('cycle.opts').slides;
    if (slides && slides.index($(this).parents(".w-ba-banner__slide").eq(0))==0){
      <% if @autoplay_video == true %>
      var $video_ele = $(this).find('video');
      if ($video_ele.length>0){
        $video_ele.eq(0).attr('autoplay','autoplay').attr('muted','muted').attr('playsinline',true);
      }
      $(this).jPlayer("mute", true).jPlayer("play",0);
      <% end %> 
    }
    <% unless @hide_video_tools %>
    $(this).parents('.jp-video').eq(0).removeClass('hide-ui');
    <% end %>
  }
  <% else %>
  var jPlayer_<%= i %> = default_video_data;
  <% end %>
  function jplayer_ready_func_<%= i %>(){
    $("#jquery_jplayer_<%= i %>").jPlayer(jPlayer_<%= i %>);
    if ($("#jquery_jplayer_<%= i %>").parents("div.cycle-slideshow").length>0){
      $("#jquery_jplayer_<%= i %>").addClass("hide-ui");
    }
    $("#jquery_jplayer_<%= i %>, #jquery_jplayer_<%= i %> +.jp-gui .jp-video-play-icon").click(function(event){
      click_jplayer_<%= i %>();
      //event.stopPropagation();
    })
    $("#jquery_jplayer_<%= i %> *[id^='jp_video'],#jquery_jplayer_<%= i %>").mouseover(function( event ) {
      var $this = $(this);
      var wrapper = $this.parents('.jp-video').eq(0)
      var video_item;
      try{
        video_item = $this.data('jPlayer').internal.video.jq;
      }catch(e){};
      if(video_item)
        video_item.removeAttr('title');
      <% unless @hide_video_tools %>
      wrapper.removeClass('hide-ui');
      <% end %>
    });
    function mousemove(target,callback_move,callback_stop) {
      target = target || window;
      $(target).mousemove((function(event) {
        var t;
        return function(event) {
          if(typeof t !='undefined')
             clearTimeout(t);
          var _this = event.target;
          if(callback_move){
            t = setTimeout(function() {callback_move.call(_this,_this)},0);
          }
          if(callback_stop){
            t = setTimeout(function() {
              if(typeof t !='undefined'){
                clearTimeout(t);
              }
              callback_stop.call(_this,_this);
            }, 1000)
          }
        }
      })())
    }
    mousemove("#jquery_jplayer_<%= i %> *[id^='jp_video'],#jquery_jplayer_<%= i %>",show_jplayer_ui_<%= i %>,hide_jplayer_ui_<%= i %>)
  }
  <% if defined?(not_ready).nil? || !not_ready %>
  $(document).ready(function(){
    jplayer_ready_func_<%= i %>();
  })
  <% end %>
</script>