Simple HTML5 video controls
Simple HTML5 video controls
Here is an example of using the media-control command to play HTML5 video, with a working video seeking slider. It's pretty basic, but serves as an starting idea.
Note: the fullscreenEnter and fullscreenExit are special Active CSS events as it seems useful to have these in addition to the regular fullscreenchange event. The slight camelcase for these events is present so there should be no clash if these events get natively added to the browser in the future.
External video links courtesy of https://archive.org.
Click a link to play.
Popeye Gopher Spinach (1954) Popeye Out to Punch (1956) 1951 Orange Bowl - University of Miami vs Clemson
.videoListItem:click, .vidButt:click {
prevent-default: true;
}
.videoListItem:click, #firstVideo:draw {
#video-title { render: "Now loaded: <strong>{@data-vid-title}</strong>"; }
#video-external-link { render: "External link: <a href='{@data-vid-link}' target='_blank'>{@data-vid-link}</a>"; }
#videoPlayer { media-control: load "{@data-vid-src}"; }
#videoSlider { add-class: .hide; }
}
#videoPlayer:loadeddata {
#videoSlider {
set-attribute: max {@#videoPlayer:duration}; remove-class: .hide; set-property: value 0;
}
}
#videoSlider:mousedown {
#videoPlayer {
media-control: pause;
}
}
#videoSlider:change {
#videoPlayer {
media-control: seek "{@value}", play;
}
}
#videoPlayer:timeupdate {
#videoSlider {
set-property: value {@#videoPlayer:currentTime};
}
}
.videoListItem:click {
#videoPlayer {
media-control: play after stack;
}
}
.videoButton:click {
#videoPlayer {
media-control: {@data-control};
}
}
.videoFullscreen:click {
fullscreen: #videoPlayerWrapper;
}
.videoFullscreenExit:click {
fullscreen: close;
}
body:fullscreenEnter {
.videoFullscreen { add-class: .hide; }
.videoFullscreenExit { remove-class: .hide; }
}
body:fullscreenExit {
.videoFullscreenExit { add-class: .hide; }
.videoFullscreen { remove-class: .hide; }
}
<p>External video links courtesy of <a href="https://archive.org">https://archive.org</a>.</p>
<p>Click a link to play.</p>
<a
href=""
id="firstVideo"
class="videoListItem"
data-vid-src="https://archive.org/download/Popeye_Gopher_Spinach_1954_871/Popeye_Gopher_Spinach_512kb.mp4"
data-vid-title="Popeye Gopher Spinach (1954)"
data-vid-link="https://archive.org/details/Popeye_Gopher_Spinach_1954_871"
>Popeye Gopher Spinach (1954)
</a>
<a
href=""
class="videoListItem"
data-vid-src="https://archive.org/download/Popeye_Out_of_the_Punch_1956/Popeye_Out_To_Punch_1956_512kb.mp4"
data-vid-title="Popeye Out to Punch (1956)"
data-vid-link="https://archive.org/details/Popeye_Out_of_the_Punch_1956"
>Popeye Out to Punch (1956)
</a>
<a
href=""
class="videoListItem"
data-vid-src="https://archive.org/download/CEP481/CEP481_512kb.mp4"
data-vid-title="1951 Orange Bowl - University of Miami vs Clemson"
data-vid-link="https://archive.org/details/CEP481"
>1951 Orange Bowl - University of Miami vs Clemson
</a>
<div id="videoPlayerWrapper">
<div>
<a href="" class="videoButton vidButt" data-control="play">Play</a>
<a href="" class="videoButton vidButt" data-control="pause">Pause</a>
<a href="" class="videoButton vidButt" data-control="load">Reload</a>
<a href="" class="videoFullscreen vidButt">Full screen</a>
<a href="" class="videoFullscreenExit vidButt hide">Exit full screen</a>
<input id="videoSlider" class="hide" type="range" min="0" />
</div>
<video id="videoPlayer"></video>
</div>
<p id="video-title"></p>
<p id="video-external-link"></p>
.videoListItem {
display: block;
margin-bottom: 20px;
}
#videoPlayerWrapper {
position: relative;
width: 640px;
height: 480px;
max-width: 100%;
}
#videoPlayerWrapper div {
position: absolute;
width: 100%;
z-index: 100;
}
#videoPlayer {
position: absolute;
width: 100%;
}
#videoSlider {
display: block;
width: 100%;
}
.vidButt, .vidButt:focus {
display: inline-block;
margin: 0 10px 10px 0;
padding: 5px 10px;
font-size: 14px;
background-color: #777;
color: #fff;
border-radius: 4px;
text-decoration: none;
}
.vidButt:hover, .vidButt:focus {
background-color: #999;
color: #fff;
text-decoration: none;
}
#videoPlayer:fullscreen {
#videoPlayer {
height: auto;
}
}
@media (max-width: 680px) {
#videoPlayer {
width: 100%;
height: 100%;
}
#videoSlider {
width: calc(100% - 40px);
}
}