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

438 lines
14 KiB
Plaintext

<%= 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(){
$("#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();
})
<% end %>
</script>