CODEWITHSUNDEEP
videohtml
leepowers
leepowers

Reputation: 38298

HTML 5 video custom controls

Like many web developers I'm looking forward to streaming video that utilizes the new HTML 5 <video> tag. Browser support definitely isn't wide enough yet, so using a Flash/SWF fallback is a must.

This got me thinking: in Flash it's possible to highly customize the playback controls (pause, play, stop, seek, volume, etc.) in HTML 5?. What options are there for customizing the glyphs, icons and colors of video controls? Is Javascript required? For instance the following page renders different controls depending on the browser - tested using FF3.5, Chrome and Safari:

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

It would be really awesome to customize and standardize controls across browsers and even match the Flash controls used by older browsers.

Upvotes: 29

Views: 116339

Answers (5)

OZZIE
OZZIE

Reputation: 7338

Using google font icons and wcag accessible 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;
}

Upvotes: 0

Philip Morton
Philip Morton

Reputation: 131879

In the HTML5 spec, there is a controls attribute for <video>.

Also check out this article: Video on the Web - Dive into HTML5. It explains:

By default, the element will not expose any sort of player controls. You can create your own controls with plain old HTML, CSS, and JavaScript. The element has methods like play() and pause() and a read/write property called currentTime. There are also read/write volume and muted properties. So you really have everything you need to build your own interface.

If you don’t want to build your own interface, you can tell the browser to display a built-in set of controls. To do this, just include the controls attribute in your tag.

Upvotes: 32

Todd
Todd

Reputation: 5538

For those interested in a great cross-browser HTML5 video player, check-out what Vimeo (http://vimeo.com) is doing. Visit any video with an HTML5-capable browser (works with at least Safari, Chrome, and IE9) and choose to "Switch to HTML5 Player."

They've implemented custom HTML controls that fully replicate their Flash-player look-and-feel. The controls look identical across browsers.

Best cross-browser implementation I've seen to-date. They even use a <canvas> element to animate the volume selector.

Upvotes: 2

Flatlin3
Flatlin3

Reputation: 1659

YouTube is currently running a HTML5 beta. You can activate it by visiting http://www.youtube.com/html5. Currently not all Videos are displayed in HTML5 after activating the beta. Videos displayed in HTML5 get a different loading animation so you can identify them (like this one http://www.youtube.com/watch?v=KT1wdjlbyFc).

As you can see their video player just looks the same as the flash version.

Upvotes: 3

Richard Inglis
Richard Inglis

Reputation: 5948

My guess is that the appearance of the controls is browser-dependent (and hence not very customizable). You could see what your test page looks like in all the browsers by submitting it to Litmus.

Upvotes: 1

Related Questions