I have a HTML video with a DIV containing custom controls over it.
The play button works perfectly fine, but the pause button does not. There are two wird things:
- The media.pause() method just does not seem to work at all, like it would not even be there.
- The .addClass() and .removeClass() after media.pause() are not working either, but when I put console.log('anything'); below it in the code, it prints in the console. Also the objects that it is called on are there (console.log-ed it).
// play video
$('.funnel-video-poster').on('click', function() {
var video_id = $(this).data('video-id');
document.getElementById(video_id).play();
$(this).find('.FVP-btn-play').addClass('hidden');
$(this).find('.FVP-btn-pause').removeClass('hidden');
});
// pause video
$('.FVP-btn-pause').on('click', function() {
var $poster = $(this).closest('.funnel-video-poster'),
video_id = $poster.data('video-id');
var media = document.querySelector('#' + video_id);
media.pause();
console.log(media);
$poster.find('.FVP-btn-play').removeClass('hidden');
$poster.find('.FVP-btn-pause').addClass('hidden');
console.log($poster.find('.FVP-btn-play'));
console.log($poster.find('.FVP-btn-pause'));
});
.funnel-block .funnel-video video {
display: block;
margin: 0 auto;
}
.funnel-block .funnel-video .funnel-video-poster {
background-repeat: no-repeat;
position: relative;
z-index: 2;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.funnel-block .funnel-video .funnel-video-poster.see-thru {
background: transparent !important;
}
.funnel-block .funnel-video .funnel-video-poster .FVP-btn-play {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-radius: 50%;
}
.funnel-block .funnel-video .funnel-video-poster .FVP-btn-pause {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
text-align: center;
border-radius: 50%;
position: absolute;
bottom: .25rem;
left: 50%;
transform: translate(-50%, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="funnel-block">
<div class="py-5 funnel-video">
<video poster="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.png" id="funnel_video_50" equalizer-state="attached" width="640" height="360">
<source src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4">
Your browser does not support HTML 5 video
</video>
<div class="funnel-video-poster see-thru" data-video-id="funnel_video_50" style="width:640px;height:360px;margin-top:-360px">
<div class="FVP-btn-play hidden">Play</div>
<div class="FVP-btn-pause">Pause</div>
</div>
</div>
</div>
Comments
Post a Comment