2

I am developing a website using Responsive Web Technology and HTML5. I have a HD quality video of 720x576 resolution which I am embedding using HTML5 <video> and <source> tags.

But as its a very heavy video so I don't want to resize it for Ipad and mobile devices. Rather I would like to load a different video of 320x240 resolution when the site is opened in Mobile/Ipad devices. I have used the media query in <source> tag but its not workin, below is the sample of the code I have tried with.

<video controls>
   <source src="mySmallVideo.webm" type="video/webm" media="all and (max-width:600px)">
   <source src="myVideo.webm" type="video/webm">
</video>

Any idea how I can achieve this requirement, if its possible with Jquery and javascript then please provide me with some ideas or if possible with some links.

Thanks in advance.

Subhajit
  • 1,761
  • 2
  • 17
  • 21

2 Answers2

3

I can think of one technique with two approaches.

First of all on your server side you could detect the user agent of the browser and if it matches against a mobile browser then you could change the src of the video to be your lower resolution one.

The second approach would be to use javscript / jQuery to detect if the user is using a mobile browser and do the same thing, change the src of the video to be the lower resolution one.

kzhen
  • 2,840
  • 15
  • 20
  • Any idea how to detect whether using Mobile/Ipad with the help of JQuery/Javascript ? – Subhajit May 25 '12 at 08:39
  • I would give a try, would let you know the status, thanks for your help. – Subhajit May 25 '12 at 09:54
  • As per that discussion either I have to use Javascript userAgent or modernizer framework. Is there any other way to detect devices? – Subhajit May 25 '12 at 10:37
  • Keep reading that stackoverflow article...other people have made non-jQuery suggestions – kzhen May 25 '12 at 11:03
  • Thanks for your help, I succeeded :) – Subhajit May 25 '12 at 13:32
  • 1
    actually, detecting the browser is _bad behavior_®. This was discouraged a long time ago - that's why things like Modernizr have born. For this use case you should, actually, simply detect the window size and load accordingly. That's exactly what you need - because, in the end, your iPad user might be using it in landscape mode, right? Browser detection won't help you there ;) – igorsantos07 Dec 18 '17 at 15:13
0

So I used a differen't approach and sorry this might be ugly to read, but the video is just embedded deep into the HTML.

    <section style="height: 1098px;" class="main-content section-full-area no-padding">
    <a href="#second-section" class="scroll-btn-full-area">
        <i class="scroll-btn-down-icon animated-opacity"></i> 
    </a>
    <div class="video-section-container">
        <div class="video-overlay" style="background-color:#000000; opacity: 0.65;"></div>
        <div class="mobile-video-image" ></div>
        <div style="width: 1920px; height: 1098px;" class="video-wrap">
            <div style="width: 1920px; height: 800px;" id="mep_0" class="mejs-container svg video mejs-video">
                <div class="mejs-inner">
                    <div class="mejs-mediaelement">
                        <video style="width: 1990px; height: 1120px;" src="about_files/final.mp4" class="video" preload="auto" loop="" autoplay="autoplay"  height="800" width="1920">
                            <source type="video/mp4" src="about_files/final.mp4">
                            <source type="video/mp4" src="about_files/final.mp4">
                        </video>
                    </div> 
                    <div class="mejs-layers">
                        <div style="width: 1920px; height: 800px; display: none;" class="mejs-overlay mejs-layer">
                            <div class="mejs-overlay-loading">
                                <span></span>
                            </div>
                        </div>
                        <div style="display: none; width: 1920px; height: 800px;" class="mejs-overlay mejs-layer">
                            <div class="mejs-overlay-error"></div>
                        </div>
                        <div style="display: none; width: 1920px; height: 0px;" class="mejs-overlay mejs-layer mejs-overlay-play">
                            <div style="margin-top: -20px;" class="mejs-overlay-button"></div>
                        </div>
                    </div>
                    <div style="visibility: hidden; display: block;" class="mejs-controls">
                        <div class="mejs-button mejs-playpause-button mejs-pause">
                            <button type="button" aria-controls="mep_0" title="Play/Pause" aria-label="Play/Pause"></button>
                        </div>
                    <div class="mejs-time mejs-currenttime-container">
                        <span class="mejs-currenttime">00:18</span>
                    </div>
                    <div style="width: 1756px;" class="mejs-time-rail">
                        <span style="width: 1738px;" class="mejs-time-total">
                        <span style="display: none;" class="mejs-time-buffering"></span>
                        <span style="width: 1738px;" class="mejs-time-loaded"></span>
                        <span style="width:  540px;" class="mejs-time-current"></span>
                        <span style="left: 537px;" class="mejs-time-handle"></span>
                        <span class="mejs-time-float">
                            <span class="mejs-time-float-current">00:00</span>
                            <span class="mejs-time-float-corner"></span>
                        </span>
                    </span>
                </div>
                <div class="mejs-time mejs-duration-container">
                    <span class="mejs-duration">01:00</span>
                </div>
                <div class="mejs-button mejs-volume-button mejs-mute">
                    <button type="button" aria-controls="mep_0" title="Mute Toggle" aria-label="Mute Toggle"></button>
                <div style="display: none;" class="mejs-volume-slider">
                    <div class="mejs-volume-total"></div>
                    <div style="height: 36.8px; top: 17.2px;" class="mejs-volume-current"></div>
                    <div style="top: 15px;" class="mejs-volume-handle"></div>
                </div>
            </div>
            <div class="mejs-button mejs-fullscreen-button">
                <button type="button" aria-controls="mep_0" title="Fullscreen" aria-label="Fullscreen"></button> 
            </div>
        </div>
        <div class="mejs-clear"></div>
    </div>
</div>

Eylen
  • 2,457
  • 3
  • 24
  • 42
Gary Frederick
  • 1