如何让 HTML5 Video pause() 方法工作？

Question

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:

1. The media.pause() method just does not seem to work at all, like it would not even be there.
2. 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>

Answer 1

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>