421 lines
13 KiB
Plaintext
421 lines
13 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, .jp-video > div, .jp-video img {
|
|
height: auto !important;
|
|
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);
|
|
width: auto !important;
|
|
}
|
|
.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"> </div>
|
|
<div class="jp-duration" role="timer" aria-label="duration"> </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"> </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 = {
|
|
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 %>
|
|
},
|
|
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);
|
|
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('autoplay','autoplay').attr('muted','muted').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 %>
|
|
//jPlayer_<%= i %>_data['poster'] = "<%= file_url %>";
|
|
//jPlayer_<%= i %>_data["autoPlay"] = <%= @autoplay_video == true %>;
|
|
jPlayer_<%= i %>["ready"] = function () {
|
|
$(this).jPlayer("setMedia", jPlayer_<%= i %>_data);
|
|
if ($(this).parents(".ba-banner-widget-youtube").eq(0).find(".w-ba-banner__slide").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 %>").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>
|