Would such an example work?
:root,
* {
background-color: #1D1E22;
color: white;
font: 1rem Consolas;
}
ol {
--color: #C1C1C1;
width: 200px;
height: 100px;
border: 1px solid var(--color);
background: var(--color);
margin-top: 35px;
margin-left: 35px;
border-radius: 3px;
padding: 10px;
overflow-y: scroll;
}
li {
list-style-position: inside;
}
<ol>
<li>Video</li>
<li>Video</li>
<li>Video</li>
<li>Video</li>
<li>Video</li>
<li>Video</li>
<li>Video</li>
<li>Video</li>
<li>Video</li>
<li>Video</li>
<li>Video</li>
<li>Video</li>
</ol>
I have this code,
<!doctype html>
<html>
<head>
<style type="text/css">
ul, li, ol {
list-style:none;
padding:0;
margin:0;
}
.listWrapper {
max-height:100px;
overflow-y:auto;
}
</style>
<meta charset="utf-8">
<title>Video.js Playlist UI - Default Implementation</title>
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="node_modules/videojs-playlist-ui/dist/videojs-playlist-ui.css" rel="stylesheet">
<link href="examples.css" rel="stylesheet">
</head>
<body>
<div class="info">
<h1>Video.js Playlist UI - Default Implementation</h1>
<p>
You can see the Video.js Playlist UI plugin in action below. Look at the
source of this page to see how to use it with your videos.
</p>
<p>
In the default configuration, the plugin looks for the first element that
has the class "vjs-playlist" and uses that as a container for the list.
</p>
</div>
<div class="player-container">
<video
id="video"
class="video-js"
height="300"
width="600"
controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
<div class="vjs-playlist">
<!--
The contents of this element will be filled based on the
currently loaded playlist
-->
</div>
</div>
<script src="node_modules/video.js/dist/video.js"></script>
<script src="node_modules/videojs-playlist/dist/videojs-playlist.js"></script>
<script src="node_modules/videojs-playlist-ui/dist/videojs-playlist-ui.js"></script>
<script>
var options = {
autoplay: true,
controls: true,
muted: false,
fluid: true,
playbackRates: [1,1.25,1.5,1.75,2,2.25,2.5],
inactivityTimeout: 0 // 0 indicates that the user will never be considered inactive.
};
var player = videojs('video', options);
player.playlist
player.playlist(
[
{
"name": "S1E1.mp4",
"sources": [
{
"src": "http://10.0.0.200/videos/s1d1/S1E1.mp4",
"type": "video/mp4"
}
]
},
...
{
"name": "Frasier S1 D4-23.mp4",
"sources": [
{
"src": "http://10.0.0.200/videos/s1d4/Frasier%20S1%20D4-23.mp4",
"type": "video/mp4"
}
]
}
]);
// Play through the playlist automatically.
player.playlist.autoadvance(0);
// Initialize the playlist-ui plugin with no option (i.e. the defaults).
player.playlistUi();
</script>
</body>
</html>
And this style sheet.
/*
We include some minimal custom CSS to make the playlist UI look good
in this context.
*/
body {
font-family: Arial, sans-serif;
}
.info {
background-color: #eee;
border: thin solid #333;
border-radius: 3px;
margin: 0 0 20px;
padding: 0 5px;
}
.player-container {
background: #1a1a1a;
overflow: auto;
width: 900px;
margin: 0 0 20px;
}
.video-js {
float: left;
}
.vjs-playlist,
.my-custom-class,
#my-custom-element {
float: left;
width: 300px;
}
.vjs-playlist.vjs-playlist-horizontal {
float: none;
height: 120px;
width: 600px;
}
When the above code renders it looks like this.
What I would like to do, is make the playlist section of the video-js player scrollable. In its current state, it is hard to navigate to a particular show.
Ideally, it would be a small box below the video player allowing me to scroll down while watching a show. I hope that makes sense.
Thank you for any input you can offer!
