2

レスポンシブ Web テクノロジーと HTML5 を使用して Web サイトを開発しています。HTML5<video>と <source>タグを使用して埋め込んでいる解像度 720x576 の HD 品質のビデオがあります。

しかし、非常に重いビデオなので、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

2 つのアプローチを持つ 1 つのテクニックを考えることができます。

まず、サーバー側でブラウザのユーザー エージェントを検出し、それがモバイル ブラウザと一致する場合は、ビデオの src を低解像度のものに変更できます。

2 番目のアプローチは、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 に答える