如何将 mp4 电影嵌入到我的 html 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2299347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I embed a mp4 movie into my html?
提问by Ralph The Mouf
I have a blog section on my site that has the TinyMce editor. I want to embed a video when I post a blog and it's just spitting out the code. I have added the <embed>tag on my output script.
我的网站上有一个包含 TinyMce 编辑器的博客部分。我想在发布博客时嵌入视频，但它只是吐出代码。我已经<embed>在我的输出脚本上添加了标签。
This is the code I'm using to for the video:
这是我用于视频的代码：
<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>
What am I missing?
我错过了什么？
回答by Esteban Küber
You should look into Video For Everyone:
你应该看看每个人的视频：
Video for Everybody is very simply a chunk of HTML code that embeds a video into a website using the HTML5 element which offers native playback in Firefox 3.5 and Safari 3 & 4 and an increasing number of other browsers.
The video is played by the browser itself. It loads quickly and doesn't threaten to crash your browser.
In other browsers that do not support , it falls back to QuickTime.
If QuickTime is not installed, Adobe Flash is used. You can host locally or embed any Flash file, such as a YouTube video.
Video for Everyone 是一段简单的 HTML 代码，它使用 HTML5 元素将视频嵌入到网站中，该元素在 Firefox 3.5 和 Safari 3 & 4 以及越来越多的其他浏览器中提供本机播放。
视频由浏览器本身播放。它加载速度快，不会威胁到您的浏览器崩溃。
在其他不支持 的浏览器中，它回退到 QuickTime。
如果未安装 QuickTime，则使用 Adobe Flash。您可以在本地托管或嵌入任何 Flash 文件，例如 YouTube 视频。
The only downside, is that you have to have 2/3 versions of the same video stored, but you can serve to every existing device/browser that supports video (i.e.: the iPhone).
唯一的缺点是您必须存储相同视频的 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>
There is an updated version that is a bit more readable:
有一个更新版本更具可读性：
<!-- "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>
回答by Mansab Uppal
If you have an mp4 video residing at your server, and you want the visitors to stream that over your HTML page.
如果您的服务器上有一个 mp4 视频，并且您希望访问者通过您的 HTML 页面流式传输该视频。
<video width="480" height="320" controls="controls">
<source src="http://serverIP_or_domain/location_of_video.mp4" type="video/mp4">
</video>
回答by Steve
Most likely the TinyMce editor is adding its own formatting to the post. You'll need to see how you can escape TinyMce's editing abilities. The code works fine for me. Is it a wordpress blog?
TinyMce 编辑器很可能正在为帖子添加自己的格式。您需要了解如何摆脱 TinyMce 的编辑功能。该代码对我来说很好用。它是一个wordpress博客吗？
