Как я встраиваю mp4 фильм в свой HTML?
У меня есть раздел блога по моему сайту, который имеет редактора TinyMce. Я хочу встроить видео, когда я отправляю блог, и это просто выкладывает код. Я добавил <embed> наклейте мой выходной сценарий.
Это - код, к которому я использую для видео:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/CgW_5Vthsds"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>
Что я пропускаю?
2 ответа
Вам следует изучить Видео для всех :
Видео для всех - это очень простой фрагмент HTML-кода, в который встроено видео на веб-сайт с помощью элемента HTML5, который предлагает собственное воспроизведение в Firefox 3.5, Safari 3 и 4 и во все большем количестве других браузеров.
Видео воспроизводится самим браузером. Он загружается быстро и не грозит сбой вашего браузера.
В других браузерах, которые не поддерживают, возвращается к QuickTime.
Если QuickTime не установлен, используется Adobe Flash. Вы можете разместить его локально или встроить любой файл Flash, например видео на YouTube.
Единственным недостатком является то, что у вас должно быть сохранено 2/3 версии одного и того же видео, но вы можете обслуживать каждое существующее устройство / браузер, поддерживающий видео (например, iPhone).
<video width="640" height="360" poster="__POSTER__.jpg" controls="controls">
<source src="__VIDEO__.mp4" type="video/mp4" />
<source src="__VIDEO__.webm" type="video/webm" />
<source src="__VIDEO__.ogv" type="video/ogg" /><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"><!--<![endif]-->
<param name="src" value="__VIDEO__.mp4" />
<param name="autoplay" value="false" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4">
<param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4" />
<img src="__POSTER__.jpg" width="640" height="360" />
<p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br />
<a href="__VIDEO__.mp4">MPEG4 / H.264 “.mp4” (Windows / Mac)</a> |
<a href="__VIDEO__.ogv">Ogg Theora & Vorbis “.ogv” (Linux)</a>
</p>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
Есть обновленная версия, которая немного более читабельна:
<!-- "Video For Everybody" v0.4.1 by Kroc Camen of Camen Design <camendesign.com/code/video_for_everybody>
=================================================================================================================== -->
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls preload="none">
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- WebKit video -->
<source src="__VIDEO__.webm" type="video/webm" /><!-- Chrome / Newest versions of Firefox and Opera -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera -->
<!-- fallback to Flash: -->
<object width="640" height="384" 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="image=__POSTER__.JPG&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>
Скорее всего, редактор TinyMce добавляет свое собственное форматирование к сообщению. Вам нужно посмотреть, как можно избежать возможностей редактирования TinyMce. У меня код работает нормально. Это блог wordpress?
.