media-control
Syntax
media-control: load ("src")|play|pause|seek (number in seconds)|volume (number between 0 and 1) [every (time)] [after (time)][, (message)...];
Apply an action on an media element, such as an audio or video tag.
Examples:
media-control: load "/video/myvideo.mp4";media-control: play;media-control: pause;media-control: seek 100;media-control: volume 0.75;See here for details on the events that work with media-control:
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
media-control
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);
}
}