I want so serve some videos on my site. They are available as .MP4 files gotten from a FlipShare camera.
Now I tried converting them to WMV (which succeeded, but when embedded in html in a <object id='mediaPlayer' width='320' height='285' classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' etc' tag, users have to install an addon and the user experience of 10 Windows Media Players on the site isn't just so good.)
So then I looked at youtube and wondered how they do it, but I can't figure out what format they convert the video to.
So my question is: What format do I have to convert my video to, to show it in a player which does not need to be installed in the users browser. What tool do i need and what is the html code to embed such a video?
As you can see: starting from scratch.
PS: I often hear: This or that file extension is just a container, there can be anything inside. If you're using this in your answer, can you explain this to me, because I never understood this. For me a .cs is a c# file and a .doc a Word file, and not 'a container'.
This isn't an easy question. The basic answer is that you need to use a format that the user's computer already supports. There is no one answer to this question. YouTube encodes videos as MP4 and embeds them in the page with a Flash-based movie player, and Flash is pretty widely supported, but you'll notice that Flash isn't available on a lot of mobile platforms — so anybody using an iPhone is shut out if you go the Flash route.
HTML5 introduces the video tag, which is meant to solve this problem once and for all, but there's still a hiccup even there — most HTML5-enabled browsers support h.264-encoded video, but Mozilla supports Ogg Theora instead. YouTube is currently experimenting with a <video>-based player, so this does seem like the future.
I believe the current best practice to support the most people possible is to encode as h.264, try to serve as a <video> element, and have a Flash-based player as a fallback if that doesn't work (which can play the same h.264 file).
I'd say the most popular solution at the moment - utilized by YouTube and other major video portals - is H.264 encoded Flash-based Video. Flash can play Video since... I think Version 8 or 9, and has since gained significant market share.
My personal favourite Flash player is LongTail Player, but it isn't free for commercial use.
Here's a SO question with a list of Flash based players including open source ones.
Flash won't play on iPhone and iPad, though.
If you want to support computers with Flash Player 9 (I've seen some around, but I don't have any hard numbers) you will need to encode FLV files (which use a codec named Sorenson I think).
The upcoming alternative is HTML 5 Video but suport for that in browsers is nowhere near a major market share.
This question requires a re-answer now that it's no longer 2010 and HTML5 videos (as utilized by most video hosting sites) and chunk-based videos (sent as responses to periodic XHR requests - as utilized by Youtube) are the norm. While there is no best way to add video to your site, Flash is definitely nowhere close to even being good as of the time of writing of this answer.
The simple un-researched answer is: Just use a video tag and it'll work out!
This is simple and intuitive, and should work fine in many of your use-cases.
The researched answer is: Unfortunately, upload the video on Youtube and embed it on your site.
The pros and cons of embedding on Youtube over just having a video tag:
The pros:
Allows you to offer your video in a multitude of qualities.
Very bandwidth efficient. Youtube is bandwidth efficient for your users since it reencodes videos, and is also bandwidth efficient for you since you'll no longer be serving your videos off your own hosting.
Offers features like closed captions, automatic subs, playing at multiple speeds, full screen player, etc.
The cons:
It's a very heavily monetized service, chances are they'll want to put ads on your video if any of its content isn't 100% originally yours.
It has very strict laws/terms and conditions that you need to adhere to, at least in my opinion.
It tracks your users. If your application requires privacy and you can't rely on your users to protect themselves, then Youtube isn't ideal.
Other alternatives that mix the pros and cons of those two options are:
Using a Javascript video library to get HTML5 video along with some of the pros of using youtube, but none of its cons.
Using FFMPEG on the server side, for bandwidth issues.
Using some CDN that supports video to deliver the video, for reliability and bandwidth issues. My current favorites are ones that rely on service workers and the bittorent protocol, to stream from users to each other, but whether that suits you or not depends on your application.
Using AWS storage services to store the video, and AWS gateway/CDN services to serve it, which might be a great solution cost-wise and efficiency-wise if you don't want youtube but don't want to store videos on whatever infrastructure is serving your website.
Sources of this answer: Personal experience. As much as I didn't want to answer from experience, this question really needed a new answer! Feel free to edit it with something more concrete.
Converting your video MPEG-4 with H.264 will get you 97% coverage on current browsers across desktop and mobile, although some Android devices don't support hardware acceleration for this format. To address that you could also serve WebM with VP9 codec.
发布评论
评论(4)
这不是一个简单的问题。基本答案是您需要使用用户计算机已经支持的格式。这个问题没有一个答案。 YouTube 将视频编码为 MP4 并使用基于 Flash 的电影播放器将它们嵌入到页面中,Flash 得到了相当广泛的支持,但您会注意到 Flash 在许多移动平台上不可用 — 因此任何使用 iPhone 的人都无法使用 Flash。如果你走Flash路线,就被拒之门外。
HTML5 引入了
video
标签,旨在一劳永逸地解决这个问题,但即使如此,仍然存在一个问题——大多数支持 HTML5 的浏览器都支持 h.264 编码的视频,但 Mozilla 支持 Ogg取而代之的是西奥拉。 YouTube 目前正在试验基于的播放器,因此这看起来确实是未来的趋势。
我相信当前支持最多人的最佳实践是编码为 h.264,尝试充当
元素,并使用基于 Flash 的播放器作为后备(如果出现这种情况)不起作用(可以播放相同的 h.264 文件)。
This isn't an easy question. The basic answer is that you need to use a format that the user's computer already supports. There is no one answer to this question. YouTube encodes videos as MP4 and embeds them in the page with a Flash-based movie player, and Flash is pretty widely supported, but you'll notice that Flash isn't available on a lot of mobile platforms — so anybody using an iPhone is shut out if you go the Flash route.
HTML5 introduces the
video
tag, which is meant to solve this problem once and for all, but there's still a hiccup even there — most HTML5-enabled browsers support h.264-encoded video, but Mozilla supports Ogg Theora instead. YouTube is currently experimenting with a<video>
-based player, so this does seem like the future.I believe the current best practice to support the most people possible is to encode as h.264, try to serve as a
<video>
element, and have a Flash-based player as a fallback if that doesn't work (which can play the same h.264 file).我想说,目前最流行的解决方案(YouTube 和其他主要视频门户网站所采用的解决方案)是 H.264 编码的基于 Flash 的视频。 Flash 可以播放视频......我认为是版本 8 或 9,并且已经获得了显着的市场份额。
我个人最喜欢的 Flash 播放器是 LongTail Player,但它不是免费用于商业用途的。
这里是这样关于基于 Flash 的播放器(包括开源播放器)列表的问题。
不过,Flash 无法在 iPhone 和 iPad 上播放。
如果您想支持带有 Flash Player 9 的计算机(我见过一些,但我没有任何硬数字),您将需要对 FLV 文件进行编码(我认为它使用名为 Sorenson 的编解码器)。
即将推出的替代方案是 HTML 5视频,但浏览器对视频的支持远未占据主要市场份额。
I'd say the most popular solution at the moment - utilized by YouTube and other major video portals - is H.264 encoded Flash-based Video. Flash can play Video since... I think Version 8 or 9, and has since gained significant market share.
My personal favourite Flash player is LongTail Player, but it isn't free for commercial use.
Here's a SO question with a list of Flash based players including open source ones.
Flash won't play on iPhone and iPad, though.
If you want to support computers with Flash Player 9 (I've seen some around, but I don't have any hard numbers) you will need to encode FLV files (which use a codec named Sorenson I think).
The upcoming alternative is HTML 5 Video but suport for that in browsers is nowhere near a major market share.
这个问题需要重新回答,因为现在已经不再是 2010 年了,HTML5 视频(大多数视频托管网站使用的)和基于块的视频(作为对定期 XHR 请求的响应发送的 - 正如 Youtube 使用的)已成为常态。虽然没有最好的方法将视频添加到您的网站,但截至撰写本答案时,Flash 绝对远未达到最佳状态。
未经研究的简单答案是:只需使用视频标签即可解决!
这既简单又直观,并且应该可以在您的许多用例中正常工作。
经过研究的答案是:不幸的是,将视频上传到 Youtube 并将其嵌入到您的网站上。
与仅使用视频标签相比,嵌入 YouTube 的优点和缺点:
优点:
缺点:
混合这两个选项优点和缺点的其他替代方案是:
本回答来源:个人经历。尽管我不想根据经验来回答,但这个问题确实需要一个新的答案!请随意用更具体的内容来编辑它。
This question requires a re-answer now that it's no longer 2010 and HTML5 videos (as utilized by most video hosting sites) and chunk-based videos (sent as responses to periodic XHR requests - as utilized by Youtube) are the norm. While there is no best way to add video to your site, Flash is definitely nowhere close to even being good as of the time of writing of this answer.
The simple un-researched answer is: Just use a video tag and it'll work out!
This is simple and intuitive, and should work fine in many of your use-cases.
The researched answer is: Unfortunately, upload the video on Youtube and embed it on your site.
The pros and cons of embedding on Youtube over just having a video tag:
The pros:
The cons:
Other alternatives that mix the pros and cons of those two options are:
Sources of this answer: Personal experience. As much as I didn't want to answer from experience, this question really needed a new answer! Feel free to edit it with something more concrete.
使用 H.264 转换视频 MPEG-4 将使您在桌面和移动设备上的当前浏览器上获得 97% 的覆盖率,尽管某些 Android 设备不支持此格式的硬件加速。为了解决这个问题,您还可以使用 VP9 编解码器来提供 WebM。
我写了一个可能有用的浏览器支持摘要: https://stuartk.com/posts/whats-the-best-html-video-format-to-serve/
Converting your video MPEG-4 with H.264 will get you 97% coverage on current browsers across desktop and mobile, although some Android devices don't support hardware acceleration for this format. To address that you could also serve WebM with VP9 codec.
I wrote up a summary of browser support that might be useful: https://stuartk.com/posts/whats-the-best-html-video-format-to-serve/