Как я могу вставить фильм MP4 в мой HTML? - PullRequest
Новая
       32

Как я могу вставить фильм MP4 в мой HTML?

40 голосов
/ 19 февраля 2010

На моем сайте есть раздел блога, в котором есть редактор 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>

Чего мне не хватает?

Ответы [ 3 ]

57 голосов
/ 19 февраля 2010

Вы должны посмотреть Видео для всех :

Видео для всех - это просто кусок 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&amp;file=__VIDEO__.mp4">
        <param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&amp;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 &amp; 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&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>
38 голосов
/ 01 декабря 2012

Если у вас есть видео в формате mp4 на вашем сервере, и вы хотите, чтобы посетители транслировали его через вашу HTML-страницу. 

<video width="480" height="320" controls="controls">
<source src="http://serverIP_or_domain/location_of_video.mp4" type="video/mp4">
</video>
2 голосов
/ 19 февраля 2010

Скорее всего, редактор TinyMce добавляет к сообщению собственное форматирование.Вам нужно увидеть, как вы можете избежать возможностей редактирования TinyMce.Код отлично работает для меня.Это WordPress блог?

...