Updated
This commit is contained in:
parent
9c1fa5d794
commit
be17e78244
|
@ -37,17 +37,46 @@
|
|||
if (typeof ad_banners_count === 'undefined'){
|
||||
var ad_banners_count = 0;
|
||||
}
|
||||
var control_play_btn_pause = function(){
|
||||
this.attr('aria-label', '<%= I18n.t("ad_banner.resume") %>');
|
||||
this.attr('title', '<%= I18n.t("ad_banner.resume") %>');
|
||||
this.find('p').text('<%= I18n.t("ad_banner.resume") %>');
|
||||
this.find('i.fa-pause').removeClass('fa-pause').addClass('fa-play');
|
||||
}
|
||||
var control_play_btn_play = function(){
|
||||
this.attr('aria-label', '<%= I18n.t("ad_banner.pause") %>');
|
||||
this.attr('title', '<%= I18n.t("ad_banner.pause") %>');
|
||||
this.find('p').text('<%= I18n.t("ad_banner.pause") %>');
|
||||
this.find('i.fa-play').removeClass('fa-play').addClass('fa-pause');
|
||||
}
|
||||
function ad_audio_button(ele,is_stop){
|
||||
var $self = $(ele);
|
||||
var button_container = $self.parents('.ba-banner-widget-youtube').eq(0);
|
||||
var append_class = "";
|
||||
if (is_stop){
|
||||
button_container.find('.jarallax-video-audio').remove();
|
||||
var control_play_btn = $('.jarallax-video-control-play');
|
||||
if(control_play_btn.length){
|
||||
control_play_btn_pause.call(control_play_btn);
|
||||
}
|
||||
}else{
|
||||
var control_play_btn = null;
|
||||
if(window.accessibility_mode){
|
||||
append_class = " accessibility_mode_btn";
|
||||
var control_play_btn = $('.jarallax-video-control-play');
|
||||
if(control_play_btn.length){
|
||||
|
||||
control_play_btn_play.call(control_play_btn);
|
||||
control_play_btn = null;
|
||||
}else{
|
||||
control_play_btn = $('<button title="<%= I18n.t("ad_banner.pause") %>" class="jarallax-video-control-play"><i class="fas fa-pause" aria-label="<%= I18n.t("ad_banner.pause") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.pause") %></p></button>');
|
||||
}
|
||||
}
|
||||
var audio_div;
|
||||
if ($self.hasClass('have-audio')){
|
||||
audio_div = $('<button title="<%= I18n.t("ad_banner.muted") %>" class="jarallax-video-audio"><i class="fas fa-volume-up" aria-label="<%= I18n.t("ad_banner.muted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.muted") %></p></button>');
|
||||
audio_div = $('<button title="<%= I18n.t("ad_banner.muted") %>" class="jarallax-video-audio'+append_class+'"><i class="fas fa-volume-up" aria-label="<%= I18n.t("ad_banner.muted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.muted") %></p></button>');
|
||||
}else{
|
||||
audio_div = $('<button title="<%= I18n.t("ad_banner.unmuted") %>" class="jarallax-video-audio"><i class="fas fa-volume-mute" aria-label="<%= I18n.t("ad_banner.unmuted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.unmuted") %></p></button>');
|
||||
audio_div = $('<button title="<%= I18n.t("ad_banner.unmuted") %>" class="jarallax-video-audio'+append_class+'"><i class="fas fa-volume-mute" aria-label="<%= I18n.t("ad_banner.unmuted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.unmuted") %></p></button>');
|
||||
}
|
||||
audio_div.find('p').css('display','none'); //fix CSP
|
||||
audio_div.click(function(event) {
|
||||
|
@ -79,7 +108,47 @@
|
|||
});
|
||||
button_container.find('.jarallax-video-audio').remove();
|
||||
button_container.append(audio_div);
|
||||
if(control_play_btn != null){
|
||||
audio_div.after(control_play_btn);
|
||||
control_play_btn.click(function(){
|
||||
var cycle_slideshow = button_container.find('.cycle-slideshow');
|
||||
var opts = cycle_slideshow.data('cycle.opts');
|
||||
var active_slide = opts.slides.filter('.'+opts.slideActiveClass);
|
||||
if(active_slide.length){
|
||||
var yt_iframe = active_slide.find('iframe');
|
||||
if(yt_iframe.length == 0){
|
||||
var jplayer = active_slide.find('.jp-jplayer').data('jPlayer');
|
||||
if(jplayer){
|
||||
if(jplayer.htmlElement.video.paused){
|
||||
jplayer.play();
|
||||
}else{
|
||||
jplayer.pause();
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if(window.yt_players){
|
||||
var subpart_id = button_container.attr('data-subpart-id');
|
||||
var subpart_yt_players = window.yt_players[subpart_id];
|
||||
if(subpart_yt_players){
|
||||
var yt_player = subpart_yt_players[yt_iframe.attr('id')];
|
||||
var play_state = yt_player.getPlayerState();
|
||||
if(play_state == YT.PlayerState.PLAYING || play_state == YT.PlayerState.BUFFERING){
|
||||
yt_player.pauseVideo();
|
||||
}else if(play_state == YT.PlayerState.UNSTARTED || play_state == YT.PlayerState.PAUSED || play_state == YT.PlayerState.ENDED || play_state == YT.PlayerState.CUED){
|
||||
yt_player.playVideo();
|
||||
play_state = yt_player.getPlayerState();
|
||||
if(play_state == YT.PlayerState.UNSTARTED || play_state == YT.PlayerState.PAUSED || play_state == YT.PlayerState.ENDED || play_state == YT.PlayerState.CUED){
|
||||
yt_player.mute().playVideo();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
if(document.getElementById("youtube-iframe-api") == null){
|
||||
var tag = document.createElement('script');
|
||||
|
@ -347,7 +416,7 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
|
|||
})
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.jarallax-video-audio{
|
||||
.jarallax-video-audio, .jarallax-video-control-play{
|
||||
z-index: 201;
|
||||
font-size: 2em;
|
||||
color: #FFF;
|
||||
|
@ -364,12 +433,21 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
|
|||
background-color: rgba(0,0,0,.6);
|
||||
transition: all 1.2s ease;
|
||||
}
|
||||
.jarallax-video-control-play{
|
||||
margin-top: 66px;
|
||||
}
|
||||
@media (max-width: 768px){
|
||||
.jarallax-video-audio{
|
||||
.jarallax-video-audio, .jarallax-video-control-play{
|
||||
top: 50%;
|
||||
}
|
||||
.jarallax-video-audio.accessibility_mode_btn{
|
||||
margin-top: -33px;
|
||||
}
|
||||
.jarallax-video-control-play{
|
||||
margin-top: 33px;
|
||||
}
|
||||
}
|
||||
.jarallax-video-audio:hover,.jarallax-video-audio:focus{
|
||||
.jarallax-video-audio:hover,.jarallax-video-audio:focus,.jarallax-video-control-play:hover,.jarallax-video-control-play:focus {
|
||||
color: #FFC500;
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue