Canvas Support

HTML5 Video Lightbox mobile stops playing every few seconds

8 replies · opened Apr 29, 2021

Aamadeus77Apr 29, 2021

Here we have a html5-video button that opens a video in a modal:

Everthings fine here in Desktop, but on mobile the video doesn't open "overlayed" instead "on black" and the video stops every few seconds?

SSemicolon WebSTAFFMay 1, 2021

Hello,

HTML5 Videos currently only play in the Native Browsers on Mobile Devices. This is controlled by the Browser and Mobile OS not by our codes.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Aamadeus77May 3, 2021

Hey thank you for your answer. But there are also problems with the SAFARI Desktop Browser! A client says, that the video opens just one time and then not again and also not in a modal window! But on safari that should work as expected, no?

Aamadeus77May 3, 2021

So now I narrowed down the problem, the "not in modal window" issue was solved through cleaning the cache (mfp was added afterwards). But see the screenshot how it looks like at my clients side (safari desktop browser)

Additional Live Link: https://www.weigang-pro.de/

SSemicolon WebSTAFFMay 3, 2021

Hello,

Thanks for more insights on this. Consider using this code instead:
[ch_pre]HTML5 Video Modal

<!-- Modal -->
<div class="modal1 mfp-hide" id="html5-video-modal">
<div class="d-block mx-auto" style="max-width: 700px;">
<video poster="images/videos/explore-poster.jpg" preload="auto" muted controls loop class="d-block w-100">
<source src='images/videos/explore.webm' type='video/webm' />
<source src='images/videos/explore.mp4' type='video/mp4' />
</video>
</div>
</div>[/ch_pre]

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Aamadeus77May 4, 2021

But when using a hidden modal block, will the video then not be preloaded in the background (which may result in a loss of preformance) and would the video auto play on clicking the "open"-button or must the play-button then also be clicked? Do you know the problem, why the current solution doesn't work in SAFARI Desktop?

SSemicolon WebSTAFFMay 4, 2021

Hello,

Unfortunately every browser treats raw HTML5 Videos differently according to their performance goals. The best way to come around this solution would be to use a Hosted Solution like YouTube or Vimeo. However, if you must use HTML5 Videos, then you will need to use JS to play/pause the Video when Modal is clicked. To disable the preload, you can simply set the attribute value from auto to none. Here is the full code:
[ch_pre]HTML5 Video Modal

[/ch_pre]

And the JS at the bottom of the Page:
[ch_pre]
let video = $('#hero-video').get(0);

$('#hero-modal-video').on('mfpOpen', function(e) {
	let isPlaying = video.currentTime > 0 && !video.paused && !video.ended && video.readyState > video.HAVE_CURRENT_DATA;

	if (!isPlaying) {
		video.play();
	}
});

$('#hero-modal-video').on('mfpClose', function(e) {
	let isPlaying = video.currentTime > 0 && !video.paused && !video.ended && video.readyState > video.HAVE_CURRENT_DATA;

	if (isPlaying) {
		video.pause();
	}
});

[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Aamadeus77May 5, 2021

Hi, thank you so much for your support. But I am not finished with it in the end.

First of all: I can't use Youtube, Vimeo because of privacy policy reasons.

Your solution to direct link to the video file like in your example here "HTML-5-Video" http://themes.semicolonweb.com/html/canvas/lightbox.html
is much better and works almost everywhere besides the SAFARI Desktop Browser (ARRGH)

Much better because the video starts and stops without additional JS and WITH sound when opening and closing! Also I am working with dynamic data - so I have several videos on my site, so the JS would get even trickier... is there not any solution to your already public HTML5-Video-Modal solution but with a workaround for SAFARI?

SSemicolon WebSTAFFMay 5, 2021

Hello,

We understand but as mentioned earlier in the replies before, this depends on the Browser. We are not modifying or controlling the HTML5 Video in any way and Safari is doing it by themselves.

The Second Solution we have provided is only one that is more reliable and works across all browsers.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard