Question

我正在使用Responsive Web Technology和HTML5开发一个网站。我有一个720x576分辨率的高清质量视频，我使用HTML5 <video>和<source>标签进行嵌入。

但是因为它是一个非常沉重的视频，所以我不想为Ipad和移动设备调整它的大小。相反，我想在Mobile / Ipad设备中打开网站时加载320x240分辨率的不同视频。我在<source>标记中使用了媒体查询，但它不起作用，下面是我尝试过的代码示例。

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

任何想法如何实现这个要求，如果它可以使用Jquery和javascript那么请提供一些想法或如果可能的话有一些链接。

提前致谢。

Answer 1

我可以通过两种方法来考虑一种技术。

首先，在您的服务器端，您可以检测到浏览器的用户代理，如果它与移动浏览器匹配，那么您可以将视频的src更改为较低的分辨率。

第二种方法是使用javscript / jQuery来检测用户是否正在使用移动浏览器并执行相同操作，将视频的src更改为较低分辨率。

Answer 2

所以我使用了一种不同的方法，抱歉这可能是难看的，但视频只是嵌入到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>

如何为移动设备和桌面网络版加载不同的视频？

2 个答案: