HTML 5 视频自定义控件

Question

与许多 Web 开发人员一样，我期待使用新的 HTML 5 标签来传输视频。浏览器支持肯定还不够广泛，因此使用 Flash/SWF 后备 是必须的。

这让我想到：在 Flash 中，可以在 HTML 5 中高度自定义播放控件（暂停、播放、停止、搜索、音量等）吗？有哪些选项可用于自定义视频控件的字形、图标和颜色？需要 JavaScript 吗？例如，以下页面根据浏览器呈现不同的控件 - 使用 FF3.5、Chrome 和 Safari 进行测试：

http ://henriksjokvist.net/examples/html5-video/

跨浏览器自定义和标准化控件，甚至匹配旧版浏览器使用的 Flash 控件，这真是太棒了。

Answer 1

在 HTML5 规范中，有一个 controls 属性对于<视频>。

另请查看这篇文章：网络视频 - 深入了解 HTML5。它解释说：

默认情况下，该元素不会公开任何类型的播放器控件。您可以使用普通的旧 HTML、CSS 和 JavaScript 创建自己的控件。该元素具有 play() 和pause() 等方法以及名为 currentTime 的读/写属性。还有读/写音量和静音属性。因此，您确实拥有构建自己的界面所需的一切。

如果您不想构建自己的界面，您可以告诉浏览器显示一组内置控件。为此，只需在标记中包含控件属性即可。

Answer 2

YouTube 目前正在运行 HTML5 测试版。您可以通过访问 http://www.youtube.com/html5 激活它。目前，激活 Beta 版后，并非所有视频都以 HTML5 格式显示。 HTML5 中显示的视频会采用不同的加载动画，以便您识别它们（例如 http:// www.youtube.com/watch?v=KT1wdjlbyFc）。

正如您所看到的，他们的视频播放器看起来与 Flash 版本相同。

Answer 3

对于那些对出色的跨浏览器 HTML5 视频播放器感兴趣的人，请查看 Vimeo (http://vimeo.com ）正在做。使用支持 HTML5 的浏览器（至少适用于 Safari、Chrome 和 IE9）访问任何视频，然后选择“切换到 HTML5 播放器”。

他们实现了自定义 HTML 控件，完全复制了 Flash 播放器的外观和感觉。这些控件在浏览器中看起来是相同的。

迄今为止我见过的最好的跨浏览器实现。他们甚至使用 元素来为音量选择器设置动画。

Answer 4

我的猜测是，控件的外观取决于浏览器（因此不太可定制）。通过将测试页面提交到 Litmus，您可以看到测试页面在所有浏览器中的外观。

Answer 5

使用可访问的 Google 字体图标和 wcag https://jsfiddle.net/j0q4nxp9/1/

<div class="my-custom-video">
    <video id="someUniqueId123">
        <source src="https://eurocard.com/globalassets/new/sebk0268_header_1550x750.mp4" />
    </video>
    <div class="my-custom-video__controls">
        <button aria-controls="someUniqueId123" class="play-pause-btn play-pause-btn--pause">
            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-320h80v-320h-80v320Zm160 0h80v-320h-80v320ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"></path></svg>
            <span class="play-pause-btn__text">Pause video</span>
        </button>
        <button class="play-pause-btn play-pause-btn--play" aria-controls="someUniqueId123">
            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"></path></svg>
            <span class="play-pause-btn__text">Play video</span>
        </button>
    </div>
</div>

.my-custom-video {
    position: relative;
}
.my-custom-video__controls {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.play-pause-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    appearance: none;
    background: none;
    outline: none;
    border: none;
    color: #000;
    text-shadow: 0 0 5px #FFFFFF;
}
video {
    max-width: 100%;
    height: auto;
}