2

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

但由于它是一个非常重的视频，所以我不想为 Ipad 和移动设备调整它的大小。相反，当网站在移动/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，那么请给我一些想法，或者如果可能的话，提供一些链接。

提前致谢。

4

2 回答 2

3

我可以用两种方法想到一种技术。

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

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

于 2012-05-25T08:21:13.643 回答
0

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

于 2015-04-21T10:40:02.090 回答