实现 HTML5 视频的最佳方式

发布于 2024-11-11 17:55:26 字数 952 浏览 5 评论 0原文

我知道 HTML5 视频比其支持者希望我们相信的要复杂得多。 Safari 使用专有的 H.264 编解码器，而 Firefox、Chrome 和 Opera 都支持开源 Theora。 Internet Explorer 两者都不支持，因此需要备用，例如 .mov 或 Flash。

我在某处找到了一个很棒的指南，其中汇总了所有这些浏览器上的 HTML5 的分步指南，但我在任何地方都找不到它。非常烦人:(

实现 HTML5 视频以便覆盖所有这些浏览器的最佳方法是什么？（不幸的是，Flash 不是一个选项。）

编辑： 好的，根据我所读到的，这里是我自己的答案：这是实现 HTML 5 视频的最佳方法...

    <video id="video" width="450" height="170" preload="auto" autoplay="autoplay">
        <source src="../static/video/video.mp4" />
        <source src="../static/video/video.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="../static/video/video.ogv" type='video/ogg; codecs="theora, vorbis"' />
        <!-- Fallback (either Flash, an image, or a "Video not supported" message, etc.) -->
    </video>

这是迄今为止在每个浏览器上都能按预期工作的唯一方法。不幸的是，自动播放似乎无法在 Chrome 中工作？:(

更新：Chrome 不能。 t 支持自动播放更新：自动播放与“静音”属性配合使用。

原文

I understand that HTML5 video is way more complicated than its proponents would like us to believe. Safari uses the proprietary H.264 codec, whereas Firefox, Chrome and Opera all support the open-source Theora. Internet Explorer doesn't support either, so needs a fallback, such as .mov or Flash.

I found a superb guide somewhere that put together a step-by-step guide for HTML5 on all these browsers, but I can't find it anywhere. Very annoying :(

What's the best way to implement HTML5 video so that all these browsers are covered? (Unfortunately, Flash is not an option.)

Edit: Ok, from what I've read, here is my own answer: This is the best way to implement HTML 5 video...

    <video id="video" width="450" height="170" preload="auto" autoplay="autoplay">
        <source src="../static/video/video.mp4" />
        <source src="../static/video/video.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="../static/video/video.ogv" type='video/ogg; codecs="theora, vorbis"' />
        <!-- Fallback (either Flash, an image, or a "Video not supported" message, etc.) -->
    </video>

It's the only way that's worked as expected on every browser so far. Unfortunately autoplay doesn't seem to be working in Chrome? :(

Update: Chrome doesn't support Autoplay. Update update: Autoplay works with the "muted" attribute.

分享到QQ

分享到微博

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

发布评论

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

忘东忘西忘不掉你 2024-11-18 17:55:26

我怀疑 Kroc Camen 的这份指南就是您想要的http://camendesign.com/code/video_for_everybody 。

如果您愿意使用 Flash 来支持旧版 IE，那么这并不像他概述的那么难。

每个视频有两个版本，一个 Theora 和一个 H.264 将涵盖所有可能的内容。如果您不介意浏览器使用 Flash 而不是 Theora，一个 H.264 就足够了。

WebM 也值得一读，它即将取代 theora。

回复收藏 0 原文

握住你手 2024-11-18 17:55:26

<video id="movie" width="320" height="320" preload controls>
  <source src="pr6.mp4" type='video/mp4; codecs=avc1.42E01E, mp4a.40.2"' />
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
    <param ... />
  </object>
</video>

此示例取自《HTML5 Up and Running》一书。您可以在单个标记中单独列出每个支持的视频编码。浏览器将从第一个开始尝试每个。此示例显示了三种编码。您需要自己进行实际的视频编码。为了支持多个浏览器，您需要多种编码。

最后一个条目是不支持新 HTML5 视频标签的浏览器的后备方案。在示例中，我使用了 Flash，但您可以使用您喜欢的任何老式格式。

<video id="movie" width="320" height="320" preload controls>
  <source src="pr6.mp4" type='video/mp4; codecs=avc1.42E01E, mp4a.40.2"' />
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
    <param ... />
  </object>
</video>

This example is taken from the book HTML5 Up and Running. You list each supported video encoding separately within a single <video> tag. The browser will try each one, starting with the first. This example shows three encodings. You will need do the actual video encoding yourself. To support multiple browsers, you'll need multiple encodings.

The final entry is a fallback for browsers that don't support the new HTML5 video tag. In the example, I used flash, but you can use whatever old-school format you prefer.

回复收藏 0 原文

扭转时空 2024-11-18 17:55:26

这可能已经太晚了，但你来了。
这些是一些 CSS 控件，请欣赏。

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}

<video width="400" height="260" controls disablePictureInPicture controlsList="nofullscreen nodownload noplaybackrate">
    <source src="http://cdn.papercut.com/video/home/home2.mp4"type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.webm"type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv"type="video/ogg" />
</video>

This may be to late but here you are.
these are some CSS controls Enjoy.

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}

<video width="400" height="260" controls disablePictureInPicture controlsList="nofullscreen nodownload noplaybackrate">
    <source src="http://cdn.papercut.com/video/home/home2.mp4"type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.webm"type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv"type="video/ogg" />
</video>

回复收藏 0 原文