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:
// 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>
I did not change the CSS, apart from adding a hidden
class, which was not included. I did not look at the CSS in depth, it was not necessary to create a working solution. However, I did notice the use of the style
attribute in the HTML code. It is best to avoid inline styles.
There was a problem with the HTML video code. Please readall about the HTML video element . Everything that is necessary to understand my solution is there.
The video playing problem may well have been caused by the fact that there were two sources in the video element, one was an image and the other was the video. I did not investigate this further. I suspect that the original code would load both the png
image and the mp4
video at the same time, and sometimes one would be first and sometimes the other. This might well have given bizarre problems. If my suspicions are correct, then the video download would be aborted when the image was first (which probably would be more often). I would be interested to know whether my suspicions are correct.
I moved the hidden
class from Play
to Pause
as this is the state of the application to start with.
There were several problems with the jQuery code.
In jQuery, a good way to add
and remove
a single class for actions such as Play
, Pause
, Stop
, and Record
is to use the toggleClass
function.
Please note the correct way to start playing and pausing the video using the jQuery trigger
function.
Here is one source of information about jQuery .
Here is a working solution:
$('.FVP-btn-play').on('click', function() { $('video').trigger('play'); $('.FVP-btn-play').toggleClass('hidden'); $('.FVP-btn-pause').toggleClass('hidden'); }); $('.FVP-btn-pause').on('click', function() { $('video').trigger('pause'); $('.FVP-btn-play').toggleClass('hidden'); $('.FVP-btn-pause').toggleClass('hidden'); });
.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). }:hidden { visibility; hidden; }
<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" src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4" width="640" height="360"> <p>Your browser does not support HTML 5 video</p> </video> <div class="funnel-video-poster see-thru" style="width:640px;height:360px;margin-top:-360px"> <div class="FVP-btn-play">Play</div> <div class="FVP-btn-pause hidden">Pause</div> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.