HTML 5视频自定义控件

Question

像许多网站开发人员一样，我很期待使用新的HTML 5 <video>标签进行视频流。但浏览器支持尚不够广泛，因此必须使用Flash/SWF备用方案。

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

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

真的很棒能够在浏览器中自定义和统一控件，甚至与旧浏览器使用的Flash控件相匹配。

- leepowers

Answer 1

在HTML5规范中，<video>有一个 属性 叫做controls。同时，查看这篇文章：Video on the Web - Dive into HTML5。它解释说：默认情况下，<video>元素不会显示任何播放器控件，但是您可以使用普通的HTML、CSS和JavaScript创建自己的控件。这个元素有像play()和pause()这样的方法，还有一个叫做currentTime的可读/写属性，也有可读/写的volume和muted属性，因此您确实拥有构建自己界面所需的一切。如果您不想构建自己的界面，可以在您的<video>标签中包含controls属性来告诉浏览器显示内置的控件。

- Philip Morton

---

找不到属性链接=document。 - john-jones

Answer 2

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

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

- Flatlin3

---

他们“得到了一个小按钮，这样你就可以识别他们”？在哪里？你是在说加载动画吗？ - Langdon

Answer 3

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

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

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

- Todd

Answer 4

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

- Richard Inglis

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;
}

- OZZIE