Загрузить содержимое, если IE или нет IE - PullRequest
1 голос
/ 28 марта 2012

При разработке своего сайта я пытаюсь использовать тег HTML5.Видео работает с использованием HTML5 в большинстве браузеров, а если нет, то использует резервный флэш-накопитель, который я включил в код.Основной код выглядит следующим образом:

<video controls autoplay preload="auto" width="640" height="360">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.mp4" type="video/mp4">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.ogv" type="video/ogg">
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
</video>

Теперь единственным браузером, с которым это все еще не работает, является IE9.IE9 видит видео команду HTML5 и загружает проигрыватель на доли секунды, но никогда не загружает видео.Поэтому я попытался настроить его следующим образом:

<!--[if IE]>
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
<![endif]-->
<![if !IE]>
<video controls autoplay preload="auto" width="640" height="360">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.mp4" type="video/mp4">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.ogv" type="video/ogg">
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
</video>
<![endif]>

Однако, с этим загруженным кодом все остальные браузеры снова работают, за исключением IE9.Он не собирает тэг if IE и просто идет прямо на страницу HTML 5, которая не загружается.

На самом деле я пытаюсь сказать, что это ЛЮБАЯ версия IE для использования.проигрыватель на основе флэш-памяти и, если это что-то еще, используйте HTML5 с запасным вариантом флэш-памяти.Если бы кто-нибудь мог рассказать немного о том, как сделать эту работу, или о более элегантном решении, это было бы очень полезно.

Спасибо

Ответы [ 2 ]

1 голос
/ 28 марта 2012

Попробуйте что-то вроде:

<!--[if lt IE 10]>
// here
<![endif]-->
0 голосов
/ 28 марта 2012

Вы должны использовать что-то вроде modernizr , чтобы проверить возможности ваших браузеров (вместо того, чтобы анализировать браузер и делать предположения - они могут быть неправильными или изменяться).В зависимости от возможностей клиента вы можете начать предоставлять правильный контент.

Другой подход (если это просто обычное видео и вам не нужны другие функции обнаружения) будет использовать что-то вроде, показанное на Видео для всех .

Это код, который они предлагают встроить видео для всем :

<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
    <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
    <!-- fallback to Flash: -->
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
        <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
        <param name="movie" value="__FLASH__.SWF" />
        <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
        <!-- fallback image. note the title field below, put the title of the video there -->
        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
             title="No video playback capabilities, please download the video below" />
    </object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
    Closed Format:  <a href="__VIDEO__.MP4">"MP4"</a>
    Open Format:    <a href="__VIDEO__.OGV">"Ogg"</a>
</p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...