422 lines
13 KiB
Plaintext
422 lines
13 KiB
Plaintext
<%= javascript_include_tag "video_data/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>
|
|
<% unless @hide_video_tools %>
|
|
<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>
|
|
<% end %>
|
|
<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 video_box = $(ele).parents("div.video_box_wrap").eq(0);
|
|
if(video_box.length == 1){
|
|
//$(ele).jPlayer("pauseOthers");
|
|
hide_jplayer_ui_<%= i %>(ele);
|
|
}
|
|
|
|
}
|
|
function ad_call_on_pause_jplayer_<%= i %>(ele){
|
|
var video_box = $(ele).parents("div.video_box_wrap").eq(0);
|
|
if(video_box.length == 1){
|
|
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-video_data').length>0){
|
|
var p_h = $(ele).parents('.w-ba-video_data').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');
|
|
*/
|
|
}
|
|
function jplayer_auto_height_<%= i %>(ele){
|
|
var is_frontend = <%= @is_frontend ? true : false %>;
|
|
if(is_frontend){
|
|
var video_box = $(ele).parents("div.video_box_wrap").eq(0);
|
|
if(video_box.height() == 0 || video_box.data("auto-height")){
|
|
video_box.data("auto-height",true);
|
|
var video_block = video_box.find('video')[0];
|
|
if(video_block != undefined){
|
|
video_block.addEventListener( "loadedmetadata", function (e) {
|
|
video_box.css("padding-bottom",'0');
|
|
video_box.height(video_box.width() * video_block.videoHeight / video_block.videoWidth);
|
|
if(!(video_box.data("bind-resize"))){
|
|
video_box.data("bind-resize",true);
|
|
$(window).resize(function(){
|
|
video_box.height(video_box.width() * video_block.videoHeight / video_block.videoWidth);
|
|
})
|
|
}
|
|
<% if @bind_autoheight_callback %>
|
|
<%=@bind_autoheight_callback%>();
|
|
<% end %>
|
|
}, false );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
$(window).resize(function() {
|
|
$('.w-ba-video_data 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'));
|
|
jplayer_auto_height_<%= 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 is_frontend = <%= @is_frontend ? true : false %>;
|
|
var video_box = $(this).parents("div.video_box_wrap").eq(0);
|
|
var autoHeight = video_box.data("auto-height");
|
|
<% end %>
|
|
window.console.log("end");
|
|
},
|
|
swfPath: "/assets/video_data",
|
|
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);
|
|
<% 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);
|
|
$video_ele.attr('poster', "<%= @file_poster %>");
|
|
}
|
|
$(this).jPlayer("mute", true).jPlayer("play",0);
|
|
<% elsif @file_poster %>
|
|
var $video_ele = $(this).find('video');
|
|
if ($video_ele.length>0){
|
|
$video_ele.attr('poster', "<%= @file_poster %>");
|
|
}
|
|
<% end %>
|
|
<% unless @hide_video_tools %>
|
|
$(this).parents('.jp-video').eq(0).removeClass('hide-ui');
|
|
<% end %>
|
|
jplayer_auto_height_<%= i %>(this);
|
|
}
|
|
<% else %>
|
|
var jPlayer_<%= i %> = default_video_data;
|
|
<% end %>
|
|
function jplayer_ready_func_<%= i %>(){
|
|
$("#jquery_jplayer_<%= i %>").jPlayer(jPlayer_<%= i %>);
|
|
$("#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>
|