Hi,
On mobile devices HTML5 videos loads files from the server, it slows down loading of the page. Loading of the page lasts from 30 to 60 seconds, depending network bandwidth.
Question: How to prevent downloading of video files from the server on mobile devices?
Best regards, Aleksey.
Hello,
Consider adding the following JS code just after the js/functions.js JS File linking:
<script>
jQuery(document).ready(function($) {
if( SEMICOLON.isMobile.any() ) {
$('video').find('source').attr('src', '');
}
});
</script>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.
Hi,
Thanks for your support!
Your decision does not work. Video the file is still loaded from the server ((
I had to write such html code:
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide dark">
<div class="video-wrap" id="video-container">
<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
</div>
<a class="dark one-page-arrow" style="bottom: 40px; min-width: 50px; max-width: 50px; color: rgba(255, 255, 255, 0.65); border: 2px solid; border-radius: 40px; min-height: 50px;" href="#" data-animate="fadeInUp" data-offset="60" data-scrollto="#content"><i class="icon-angle-down"></i></a>
</div>
</div>
</div>
<script>
window.onload = function(){
if(window.innerWidth >= 1024) {
jQuery('.video-wrap').prepend('<video id="slide-video" poster="/images/explore.jpg" preload="auto" loop="loop" autoplay="autoplay" muted="muted"><source src="/videos/Video.webm" type="video/webm" /><source src="/videos/Video.mp4" type="video/mp4" /></video>');
} else {
jQuery('.video-wrap').append('<div class="video-placeholder" style="background-image: url(/images/explore.jpg);"></div>');
}
};
</script>It is similar that it is not correct, but it works...
Best regards, Aleksey.
Hello,
You can also consider using the following code:
<div class="video-wrap">
<video id="slide-video" poster="images/videos/deskwork.jpg" preload="auto" loop autoplay muted>
<source src='images/videos/deskwork.webm' type='video/webm' />
<source src='images/videos/deskwork.mp4' type='video/mp4' />
</video>
<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
<div class="video-placeholder" style="background-image: url('images/videos/deskwork.jpg');"></div>
</div>and then the following JS Code:
<script>
jQuery(document).on( 'ready', function($){
if( $(window).width() < 1024 ) {
$('video').remove();
}
});
</script>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.
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