当前位置：文江博客话题详情

如何播放 H264 视频？

发布于 2024-09-01 06:07:23 字数 233 浏览 6 评论 0原文

我从摄像机（来自安全摄像机）收到以下视频文件 http://dl.dropbox.com/u/1369478/tmw/recording.264

如何查看内容？根据扩展名，我认为这是一个 H264 文件。有没有办法在 HTML5 浏览器上播放这个？

问候

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无声情话 2024-09-08 06:07:23

嗯.. 从它的外观来看，它看起来不像 H264 文件。.

通过 MediaInfo 运行它，我得到了这个：

视频
格式：AVC
格式/信息：高级视频编解码器
格式配置文件：[电子邮件受保护]
格式设置，CABAC：否
格式设置，ReFrames：1 帧
宽度：352 像素
高度：288 像素
显示宽高比：1.222
分辨率：24位
比色法：4:2:0
扫描类型：逐行扫描

除此之外，您还必须知道并非所有浏览器都支持<视频>中的H264。 element.. 他们中的一些人决定保留 ogg，因此它并不是真正随处可用：S

下面的表格显示仅 Chrome 和 Safari 支持的 H264 视频操作系统： http://www.findmebyip.com/litmus#html5-video-codecs

无论如何，如果您确实得到了视频文件，并且您想将其嵌入浏览器中，并且您知道您将从兼容的浏览器访问它（或者如果您获得 H264 和 ogg 版本），您可以使用以下命令：

<video src="http://link/to/video/file" controls="controls" width="500"></video>

或者如果您有多种格式：

<video controls="controls" width="500">
    <!-- if Firefox -->
    <source src="video.ogg" type="video/ogg" />
    <!-- if Safari/Chrome-->
    <source src="video.mp4" type="video/mp4" />
</video>

检查出此链接以获取更多示例，以及如何为不支持的浏览器添加 Flash/平面图像后备
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-html-5-video-with-a-fallback-to-flash/

UPD：据我了解，您在那里托管的文件是一个示例，而不是您想要在页面中拥有的实际文件。您在那里的文件有一个框架，因此它可能是一个 jpeg 图像，并且这没有什么区别：P

如果您确实有相同格式的实际视频文件，您可以尝试使用上面的代码片段将其注入页面中。如果浏览器不行，并且不想播放它（请记住使用 Chrome 或 Safari 检查它），那么您可以使用网络上的免费编码器之一来转换文件。例如，我一直在使用免费的 H.264 编码器将我的视频文件转换为 H.264 ：）

祝你好运！

UPD2：我实际上获取并编码了该文件...文件大小从 1.766MB 下降到 34KB。这是相同的视频、1 帧、相同的大小...但视频中的 1 帧循环了大约 30 秒:)
所以我在那里看到了一个长 30 秒的背景..我猜你真的应该对文件进行编码，即使它已经是 H.264 格式，因为计算机会对视频文件进行更好的编码，并且你会打赌（几乎）相同图像质量，文件大小小得多。

Hmm.. From the looks of it it doesn't look like a H264 file..

Running it through MediaInfo, I got this:

Video
Format : AVC
Format/Info : Advanced Video Codec
Format profile : [email protected]
Format settings, CABAC : No
Format settings, ReFrames : 1 frame
Width : 352 pixels
Height : 288 pixels
Display aspect ratio : 1.222
Resolution : 24 bits
Colorimetry : 4:2:0
Scan type : Progressive

Apart from it all, you have to know that not all browsers support H264 in the <video> element.. Some of them decided to hold on to ogg, so it's not really going to be available everywhere :S

Here's a table that shows that H264 video os only supported by Chrome and Safari: http://www.findmebyip.com/litmus#html5-video-codecs

In any case, if you do get a video file, and you want to embed it in a browser, and you know that you'll access it from a compatible browser (or if you get H264 AND ogg versions), you can use this:

<video src="http://link/to/video/file" controls="controls" width="500"></video>

Or if you have multiple formats:

<video controls="controls" width="500">
    <!-- if Firefox -->
    <source src="video.ogg" type="video/ogg" />
    <!-- if Safari/Chrome-->
    <source src="video.mp4" type="video/mp4" />
</video>

Check out this link for some more examples, and how to add flash / flat image fallback for browsers that don't support it
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-html-5-video-with-a-fallback-to-flash/

UPD: As I understood, the file that you hosted up there is an example, not the actual file that you want to have in your page.. The file you have there has a single frame, so it might be a jpeg image, and it would make no difference :P

If you DO have an actual video file with the same format, you might try to inject it in the page using the snippets above. If the browser coughs it up, and doesn't want to play it (remember to check it with Chrome or Safari), then you can just convert the file using one of the free encoders on the net. For example, I've been using the free H.264 encoder to convert my video files to H.264 :)

Good luck!

UPD2: I actually took and encoded the file... The file size dropped from 1.766MB to 34KB. It's the same video, 1 frame, same size... but the 1 frame in the video is looped for ~30 seconds :)
So I see a long 30 sec background there.. I guess you really SHOULD encode the file, even if it's in H.264 already, because the computer will encode video files a LOT better, and you'll bet (almost) the same picture quality, with a much smaller file size.

回复收藏 0 原文

属性 2024-09-08 06:07:23

如果这仍然不起作用，请从上面发布的 Artiom 中获取代码，您可能需要在 type 属性中包含编解码器，例如：

<video autoplay controls width="512" height="300">
  <source src='myVideo.theora.ogg' type='video/ogg; codecs="theora, vorbis"'>
  <source src='myVideo.mp4' type='video/mp4; codecs="mp4v.20.8, samr"'>
</video>

有关详细信息，请参阅：html5 实验室 - 使用视频元素

If this still isn't working, taking the code from what Artiom posted above, you may want to include the codec in the type attribute, e.g.:

<video autoplay controls width="512" height="300">
  <source src='myVideo.theora.ogg' type='video/ogg; codecs="theora, vorbis"'>
  <source src='myVideo.mp4' type='video/mp4; codecs="mp4v.20.8, samr"'>
</video>

For more info see: html5 laboratory - using the video element

回复收藏 0 原文