1

私は次のコードを使用しており、このアプローチに関するアドバイスが必要でした。私たちは、iPad、タブレット、Mac、iPhone、Androidなどのモバイル向けにサイトを最適化しています。

私は、最初にHTML5を実行するのが最善のアプローチであると判断しました。HTML5が存在しない場合は、Flashにフォールバックします。ただし、正しく機能しません。たとえば、すべてのHTML5ビデオが存在しない場合、mimeエラーが表示され、Flashにフォールバックしませんか？

<video width="294" height="530" loop="" preload="false" autoplay="" id="GCFlashAlt" controls="controls" tabindex="0">
        <source type="video/webm" src="http://cdn.com/718_blacklep/718_blacklep.webm"></source>
        <source type="video/ogg" src="http://cdn.com/718_blacklep/718_blacklep.ogv"></source>
        <source type="video/mp4" src="http://cdn.com/718_blacklep/718_blacklep.mp4"></source>
        <object width="294" height="530" align="middle" id="product2a" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
                <param value="http://cdn.com/718_blacklep/718_blacklep.swf" name="movie">
                <param value="best" name="quality">
                <param value="#ffffff" name="bgcolor">
                <param value="true" name="play">
                <param value="true" name="loop">
                <param value="transparent" name="wmode">
                <param value="showall" name="scale">
                <param value="true" name="menu">
                <param value="false" name="devicefont">
                <param value="" name="salign">
                <param value="sameDomain" name="allowScriptAccess">
                <!--[if !IE]>-->
                <object width="294" height="530" data="http://cdn.com/718_blacklep/718_blacklep.swf" type="application/x-shockwave-flash">
                        <param value="http://cdn.com/718_blacklep/718_blacklep.swf" name="movie">
                        <param value="best" name="quality">
                        <param value="#ffffff" name="bgcolor">
                        <param value="true" name="play">
                        <param value="true" name="loop">
                        <param value="transparent" name="wmode">
                        <param value="showall" name="scale">
                        <param value="true" name="menu">
                        <param value="false" name="devicefont">
                        <param value="" name="salign">
                        <param value="sameDomain" name="allowScriptAccess">
                        <!--<![endif]--> 

                        <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
        </object>
</video>
4

3 に答える 3

2

これらすべてを処理するMediaElementJSなどのライブラリを使用することをお勧めします。

于 2012-12-12T15:15:35.577 に答える
0

これが私たちが行ってきた解決策です。クロスブラウザおよびクロスデバイス準拠。

外部ライブラリを使用したくありませんでしたが、mediaelementsjsやその他のライブラリは優れた代替手段ですが、これが私たちにとって最良のソリューションです。

1-ユーザーがFlashを使用していることを確認します。使用している場合は、SWFバージョンのビデオを再生します

2-ユーザーがFlashを使用していない場合は、HTML5が有効になっているかどうかを確認します。

3-HTML5を使用している場合は、最初にmp4を再生します（ブラウザの再生をサポートしている必要があります）

4-HTML5を使用しているが、Firefoxまたは電話を使用している場合は、例として.ogv

5-最後に、上記のすべてに失敗したWebMを再生します

6-これらの機能がない場合は、空白のdivを含めるだけです。これにより、サイトのビデオ再生ボタンがトリガーされ、ビデオ機能がまったく表示されなくなります。

PHPはなく、jQueryも少なく、残りは有効なHTML5です。これは、iPadを含むすべてのデバイスで機能するため、私たちが見つけた最良のソリューションです。またIF CONDITIONAL、古いInternetExplorerの欠点もあります。これもIEの再生に役立ちました。

私たちが見た結果は素晴らしく、ファイルは私たちの人口統計のために持っているすべての顧客のデバイスとブラウザで機能します。GetClickyを使用しており、APIがあり、追加<video title="video name"するとHTML5とSWFの再生を追跡できます。

<div class="videobox showorhide" id="videoisonbox">
<object width="294" height="530" align="middle" id="product2a" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
        <param value="http://cdn.com/718_blacklep/718_blacklep.swf" name="movie">
        <param value="best" name="quality">
        <param value="#ffffff" name="bgcolor">
        <param value="true" name="play">
        <param value="true" name="loop">
        <param value="transparent" name="wmode">
        <param value="showall" name="scale">
        <param value="true" name="menu">
        <param value="false" name="devicefont">
        <param value="" name="salign">
        <param value="sameDomain" name="allowScriptAccess">
        <!--[if !IE]>-->
        <object width="294" height="530" data="http://cdn.com/718_blacklep/718_blacklep.swf" type="application/x-shockwave-flash">
                <param value="http://cdn.com/718_blacklep/718_blacklep.swf" name="movie">
                <param value="best" name="quality">
                <param value="#ffffff" name="bgcolor">
                <param value="true" name="play">
                <param value="true" name="loop">
                <param value="transparent" name="wmode">
                <param value="showall" name="scale">
                <param value="true" name="menu">
                <param value="false" name="devicefont">
                <param value="" name="salign">
                <param value="sameDomain" name="allowScriptAccess">
                <!--<![endif]-->
                <video title="718 Black Lep Dress" width="294" height="530" loop preload="false" autoplay id="GCFlashAlt" controls tabindex="0">
                        <source type="video/mp4" src="http://cdn.com/718_blacklep/718_blacklep.mp4"></source>
                        <source type="video/ogg" src="http://cdn.com/718_blacklep/718_blacklep.ogv"></source>
                        <source type="video/webm" src="http://cdn.com/718_blacklep/718_blacklep.webm"></source>
                </video>
                <div class="blank" class="enabled disable detect" id="isvideooncheck"><!-- jQuery Update for disabling video --></div>
                <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
</object>
</div>
于 2012-12-17T09:02:22.497 に答える
-1

HTML5ビデオファイルが存在するかどうかのチェックは、サーバー側で行う必要があります。たとえば、サーバーでPHPを使用している場合は、次のようなものを使用できます。

<?php if (file_exists($html5videofile)) { ?>
    <video ...>
        <source ...>
        <source ...>
        <source ...>
        <object ...>
    </video>
<?php } else { ?>
    <object ...>
<?php } ?>
于 2012-12-12T19:55:34.193 に答える