如何将 mp4 电影嵌入到我的 html 中？

Posted 2023-02-16

【中文标题】如何将 mp4 电影嵌入到我的 html 中？

【英文标题】：How do I embed a mp4 movie into my html?

【发布时间】：2011-01-18 22:51:18

【问题描述】：

我的网站上有一个带有 TinyMce 编辑器的博客部分。我想在发布博客时嵌入视频，它只是在吐出代码。我在我的输出脚本中添加了<embed> 标签。

这是我用于视频的代码：

<object  >
    <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"  ></embed>
</object>

我错过了什么？

【问题讨论】：

你确定博客引擎允许

***.com/questions/5800822/…

【参考方案1】：

你应该看看Video For Everyone:

Video for Everyone 是一段非常简单的 html 代码，可将视频嵌入网站 使用在 Firefox 中提供本机播放的 HTML5 元素 3.5 和 Safari 3 & 4 以及越来越多的其他浏览器。

视频由浏览器本身播放。它加载速度很快，不会威胁到您的浏览器崩溃。

在其他不支持的浏览器中，会掉 回到 QuickTime。

如果未安装 QuickTime，则使用 Adob​​e Flash。您可以在本地托管或嵌入任何 Flash 文件，例如 YouTube 视频。

唯一的缺点是，您必须存储相同视频的 2/3 版本，但您可以为所有支持视频的现有设备/浏览器提供服务（例如：iPhone）。

<video   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   classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
    [endif]--><!--[if !IE]><!-->
    <object   type="video/quicktime" data="__VIDEO__.mp4"><!--<![endif]-->
    <param name="src" value="__VIDEO__.mp4" />
    <param name="autoplay" value="false" />
    <param name="showlogo" value="false" />
    <object   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"   />
        <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   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   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"   
             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>

【参考方案2】：

如果您的服务器上有一个 mp4 视频，并且您希望访问者通过您的 HTML 页面流式传输该视频。

<video   controls="controls">
<source src="http://serverIP_or_domain/location_of_video.mp4" type="video/mp4">
</video>

【讨论】：

值得注意的是，此解决方案仅适用于 HTML5 文档。

@likeitlikeit 这可能是我的问题的原因：***.com/questions/16487767/… 吗？

@Mansab Uppal。仅当 .mp4 的主机支持流式协议时，您的解决方案才有效，否则它将失败而没有任何对象回退，如 voyagers 示例。不幸的是，由于带宽考虑，目前大多数托管服务不支持流式传输，并且在使用 HTML5 视频标签时仍然需要对象回退。

【参考方案3】：

TinyMce 编辑器很可能会在帖子中添加自己的格式。您需要了解如何摆脱 TinyMce 的编辑能力。该代码对我来说很好。是wordpress博客吗？