Как заставить это видео- js плейлист прокручиваться вместо того, чтобы занимать экран? - PullRequest
Новая
       30

Как заставить это видео- js плейлист прокручиваться вместо того, чтобы занимать экран?

0 голосов
/ 26 мая 2020

У меня есть этот код, 

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

Когда приведенный выше код отображается, это выглядит так. enter image description here

Что я хотел бы сделать, так это сделать прокручиваемым раздел списка воспроизведения видео- js проигрывателя. В его текущем состоянии сложно перейти к конкретному шоу.

В идеале, это было бы небольшое поле под видеоплеером, позволяющее мне прокручивать вниз во время просмотра шоу. Надеюсь, это имеет смысл.

Спасибо за любой вклад, который вы можете предложить!

...