add audio button

This commit is contained in:
邱博亞 2021-11-14 12:43:46 +08:00
parent 600d0d94b8
commit 867d94a980
2 changed files with 34 additions and 2 deletions

View File

@ -161,6 +161,7 @@
//$(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);
@ -177,11 +178,13 @@
var jpalyer_video = $(ele).parents('.jp-video').eq(0);
jpalyer_video.find(".jp-gui").css("display","");
jpalyer_video.addClass('hide-ui');
ad_audio_button(ele,true);
}
function show_jplayer_ui_<%= i %>(ele) {
<% unless @hide_video_tools %>
var jpalyer_video = $(ele).parents('.jp-video').eq(0);
jpalyer_video.removeClass('hide-ui');
ad_audio_button(ele,false);
<% end %>
}
function click_jplayer_<%= i %>(){

View File

@ -37,7 +37,13 @@
if (typeof ad_banners_count === 'undefined'){
var ad_banners_count = 0;
}
function ad_audio_button(ele,is_stop){
if (is_stop){
$(ele).find('.jarallax-video-audio').remove()
}else{
$(ele).append('<div class="jarallax-video-audio"><i class="fas fa-volume-mute"></i></div>')
}
}
if(document.getElementById("youtube-iframe-api") == null){
var tag = document.createElement('script');
tag.setAttribute("id", "youtube-iframe-api");
@ -105,7 +111,6 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
}
})
}
function onPlayerStateChange(event){
var iframe = $(event.target.h),
cyclediv = iframe.parents("div.cycle-slideshow");
@ -114,10 +119,12 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
cyclediv.cycle("pause");
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','hidden')
ad_audio_button(cyclediv,true);
}else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
if(cyclediv[0].need_resume)
cyclediv.cycle("resume");
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','')
ad_audio_button(cyclediv,false);
}
{{extra_state_chnage_script}}
}
@ -178,6 +185,28 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
})
</script>
<style type="text/css">
.jarallax-video-audio{
z-index: 1;
font-size: 36px;
color: #FFF;
text-align: center;
position: absolute;
top: 2%;
right: 2%;
height: 66px;
width: 66px;
border-radius: 50%;
line-height: 1.8;
cursor: pointer;
border: 2px solid rgba(255,255,255,.6);
background-color: rgba(0,0,0,.6);
transition: all 1.2s ease;
}
.jarallax-video-audio:hover{
color: #FFC500;
transition: all 0.6s ease;
}
.w-ba-banner .controlplay .resume-slide.active i{
color: #32D9C3;
}