314 lines
10 KiB
Plaintext
314 lines
10 KiB
Plaintext
|
<%= javascript_include_tag "ad_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;
|
||
|
|
}
|
||
|
|
.jp-type-single{
|
||
|
|
position: relative;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.jp-video{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
[id^="jp_video_"]{
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.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-no-solution
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div id="jp_container_<%= i %>" class="jp-video hide-ui" 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 %>
|
||
|
|
}
|
||
|
|
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);
|
||
|
|
},
|
||
|
|
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");
|
||
|
|
},
|
||
|
|
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 cyclediv = $(this).parents("div.cycle-slideshow").eq(0);
|
||
|
|
cyclediv.cycle("pause").cycle("next");
|
||
|
|
var current_cycle = cyclediv.find(".cycle-slide-active")
|
||
|
|
if(current_cycle.hasClass("jplayer_slide"))
|
||
|
|
current_cycle.find('.jp-jplayer').jPlayer("mute", true).jPlayer("play",0);
|
||
|
|
else
|
||
|
|
current_cycle.find('iframe').data("yt_player").mute().playVideo();
|
||
|
|
<% end %>
|
||
|
|
window.console.log("end");
|
||
|
|
},
|
||
|
|
swfPath: "/assets/ad_banner",
|
||
|
|
supplied: "webmv, ogv, m4v",
|
||
|
|
globalVolume: true,
|
||
|
|
useStateClassSkin: true,
|
||
|
|
autoBlur: false,
|
||
|
|
smoothPlayBar: true,
|
||
|
|
keyEnabled: true,
|
||
|
|
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 %>";
|
||
|
|
//jPlayer_<%= i %>_data["autoPlay"] = <%= @autoplay_video == true %>;
|
||
|
|
jPlayer_<%= i %>["ready"] = function () {
|
||
|
|
$(this).jPlayer("setMedia", jPlayer_<%= i %>_data);
|
||
|
|
<% if @autoplay_video == 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").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>
|