.pause() isn't working in Chrome & Firefox, but works fine in Safari
Question
I didn't think I would have an issue with this since Safari was working fine, but it seems that the toggle videoElement.pause() isn't firing in Chrome/Firefox. Any ideas of how I can make it cross-browser friendly?
$('a.playBtn.KBAC .pause').on('click', function(e) {
e.preventDefault();
var videoElement = document.getElementById('radioPlayerKbac');
videoElement.pause();
});
I am using the viblast player . Thanks for your help.
UPDATE: Works with Jquery 3.3.1. Our bootstrap framework is using 3.4.1. Could that be a problem or maybe where our jquery is being enqueued (footer or header)?
$('a.playBtn.KBAC').on('click', function(e) { e.preventDefault(); var videoElement = document.getElementById('KBAC'); videoElement.pause(); });
video { height: 280px; width: auto; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.-- ideally this should be in <head> --> <script src="//cdn.viblast.com/vb/stable/viblast:js"></script> <a href="#"class="playBtn KBAC">PAUSE</a> <.-- body --> <video id="KBAC" autoplay src="https://58f14b372a413.streamlock.net.444/kbac/kbac?stream_aac/playlist.m3u8?id=1355" data-viblast-key="N8FjNTQ3NDdhZqZhNGI5NWU5ZTI=" controls width="640"></video>
1 answers
solution1
0 ACCPTED 2020-07-24 19:23:19
After debugging and trying different things, I found this solution:
$( "a.playBtn.KBAC .pause" ).click(function(e) {
var videoElement = document.getElementById('radioPlayerKbac');
if (!videoElement.paused) { // Check that video is playing when clicked
setTimeout(() => { // V. brief timer to allow default action to occur
if (!videoElement.paused) { // Is it still playing?
videoElement.pause(); // Pause it
}
}, 0);
}
});
This works in Safari, Chrome and Firefox.
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.