Another idea is how to create playlists like those on Youtube but without having to code the entire interface from scratch. Dudley Storey, again, [proposed a solution](http://thenewcode.com/792/Create-A-Simple-HTML5-Video-Playlist) using CSS `display: table` and a little Javascript magic.
I've taken the layout from Storey's article as is (I'm still learning about `display: table` and related CSS) and enhanced the Javascript with some of my working ideas. The two main constraints:
- It must work without Javascript; The user must be able to view the videos when there Javascript is not available
- It must work without the mouse using only keyboard
THe HTML uses a figure as the container for the playlist. The two children are a `video` element with the traditional sources. We make sure to leave the controls visible so people who choose to work with the standard video controls.
In the `figcaption` element we add links and images for the other videos available in the playlist.
```markup
Video Playlist
```
### Javascript
The first portion of the script is a shortcut. Rather than attach the same event to multiple elements manually we define the elements we want to attach the event to, in this case all the `a` elements inside `figcaption` and loop through them attacking the handler function to the `onclick` event for each link.
```javascript
let anchors = document.querySelectorAll('figcaption a');
let links = [...anchors];
for (let i=0; i {
switch (e.which) {
case 32: // 1
case 13: // 1
e.preventDefault();
if (video.paused) {
video.play();
} else {
video.pause();
}
break;
case 37: // 2
skip(-5);
break;
case 39: // 3
skip(5);
break;
}
});
function skip(value) {
video.currentTime += value;
}
```
### CSS
The CSS uses `display: table` to layout the content in a way that is backwards compatible. The video (the `#video_player` element )is the main component of our 'table' layout and will take 2/3rd of the space while each of the video thumbnails (`figcaption a` elements) are stacked in the remaining width of the element.
This is similar to using a table but not quite the same: The table element in HTML is a semantic structure. The `table` value for display is an indication of how the content should be displayed and has nothing to do with the structure of the content like the `table` tag does
```css
#video_player {
display: table;
line-height: 0;
font-size: 0;
background: #fff;
}
#video_player video,
#video_player figcaption {
display: table-cell;
vertical-align: top;
}
#video_player figcaption {
width: 25%;
}
#video_player figcaption a {
display: block;
opacity: .5;
transition: 1s opacity;
}
#video_player figcaption a img,
figure video {
width: 100%;
height: auto;
}
#video_player figcaption a:hover {
opacity: 1;
}
```
### One further refinement
Right now there is no way to navigate between videos and now way to play the first video again after you navigate to the thumbnails. It'll require some additional Javascript like the one in this [post](http://thenewcode.com/909/Create-An-Automatic-HTML5-Video-Playlist) by Dudley Storey.
