实现HTML5视频的最佳方式

Question

据我所知,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不支持自动播放.

Answer 1

这可能已经太晚了，但你来了。这些是一些 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>