如何讓這個 video-js 播放列表滾動而不是占據屏幕？

Question

我有這個代碼，

<!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>

還有這個樣式表。

/*
  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;
}

當上面的代碼呈現時，它看起來像這樣。

我想做的是使 video-js 播放器的播放列表部分可滾動。 在其當前的 state 中，很難導航到特定的節目。

理想情況下，它將是視頻播放器下方的一個小框，允許我在觀看節目時向下滾動。 我希望這是有道理的。

感謝您提供的任何意見！

Answer 1

這樣的例子行得通嗎？

 :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>

如何讓這個 video-js 播放列表滾動而不是占據屏幕？

問題描述

1 個解決方案

解決方案1
0 2021-12-05 03:06:37

如何讓這個 video-js 播放列表滾動而不是占據屏幕？

問題描述

1 個解決方案

解決方案1 0 2021-12-05 03:06:37

解決方案1
0 2021-12-05 03:06:37