web-dev-qa-db-fra.com

Comment intégrer un film mp4 dans mon html?

J'ai une section de blog sur mon site qui a l'éditeur TinyMce. Je souhaite intégrer une vidéo lorsque je poste un blog et que celui-ci ne fait que cracher le code. J'ai ajouté le <embed> balise sur mon script de sortie.

Voici le code que j'utilise pour la vidéo:

<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>

Qu'est-ce que je rate?

htmlvideoembeddingmp4
42
Ralph The Mouf

Vous devriez regarder Video For Everyone :

Video for Everybody est tout simplement un morceau de code HTML qui intègre une vidéo dans un site Web à l'aide de l'élément HTML5, qui offre une lecture native dans Firefox 3.5 et Safari 3 4, ainsi que dans un nombre croissant d'autres navigateurs.

La vidéo est lue par le navigateur lui-même. Il se charge rapidement et ne menace pas de bloquer votre navigateur.

Dans les autres navigateurs qui ne prennent pas en charge, QuickTime est utilisé.

Si QuickTime n'est pas installé, Adobe Flash est utilisé. Vous pouvez héberger localement ou intégrer tout fichier Flash, tel qu'une vidéo YouTube.

Le seul inconvénient est que vous devez avoir les versions 2/3 de la même vidéo stockées, mais vous pouvez également les diffuser sur tous les appareils/navigateurs existants prenant en charge la vidéo (c'est-à-dire: l'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>

Il existe une version mise à jour un peu plus lisible:

<!-- "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>
58
Esteban Küber

Si vous avez une vidéo MP4 résidant sur votre serveur et que vous voulez que les visiteurs la diffusent en streaming sur votre page HTML.

<video width="480" height="320" controls="controls">
<source src="http://serverIP_or_domain/location_of_video.mp4" type="video/mp4">
</video>
38
Mansab Uppal

Très probablement l'éditeur TinyMce ajoute sa propre mise en forme à la publication. Vous aurez besoin de voir comment vous pouvez échapper aux capacités d'édition de TinyMce. Le code fonctionne bien pour moi. Est-ce un blog wordpress?

2
Steve