0

I intend to use html5 video header for my web page. I'm using Codeignitor(PHP) on the server and bootstrap and jquery on client side. video header is nice and effective on larger screens sizes. but it takes a considerable time to load on mobile browsers on lower download speeds. so that I want to prevent following code portion from downloading or executing (not to hide the downloaded elements) on mobile browsers. for the performances sake 1. can i detect user browser width and type(mobile or not) on the server? 2. Can i analyse the http request to detect that? 3. Can i do this without Ajax and page Redirectings?

    <div class="container-fluid">
    <div class="row">
       <div class="header-container">
      <div class="video-container">
        <video id="video" autobuffer  preload="true" autoplay="autoplaymuted" loop="loop" volume="0" poster="pic.jpg">
          <source src="video/cover.mp4">
          <source src="video/cover.webm" type="video/webm">
          <source src="video/cover.ogv" type="video/ogg">   
        </video>
      </div>
      <h3> my web video header </h3>
    </div>
    </div>
Dulara Malindu
  • 1,477
  • 4
  • 18
  • 37
  • You cannot detect the browser width without first detecting it via JavaScript and handing it to the server, either via AJAX or a redirection. You can, however, [check what the user agent is](https://stackoverflow.com/questions/6322112). If you can use JavaScript, you can also only append the video after determining the browser width. – vox Nov 23 '17 at 19:44
  • Answer for questions 1, 2, and 3: Nope. – Sammitch Nov 23 '17 at 20:21
  • Suggested workflow: 1. Snip the first frame out of your video. 2. Make that image the background of the element where the video will go. 3. Use javascript to determine which video to use. 4. Use javascript to put that video into the video element. – Sammitch Nov 23 '17 at 20:25

1 Answers1

1

Please try this. May be it will work for you.

$(document).ready(function(e) {
    var getWidth = $(window).width();
    console.log( 'Onload' + getWidth );
});
window.onresize = function() {
    var getWidth = $(window).width();
    console.log( 'on resize window' + getWidth );
};
Shoaib
  • 314
  • 1
  • 4