search

silvermine / videojs-quality-selector

MIT License
177 stars 56 forks source link

demo in the repo not working #71

Open dvic opened 3 years ago

dvic commented 3 years ago

I had problems installing this plugin and making it work so I looked at the demo, but in that example the quality selector is also not being shown:

image

Any idea what's missing here?

lycoch commented 2 years ago

Hello, same issue here, the player works but no quality selector thanks for any help

<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.0/video-js.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/silvermine-videojs-quality-selector@1.1.2/src/js/index.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css" rel="stylesheet" />

   <video id="mainvideo" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}'>
      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.720p.webm" type="video/webm" label="720P">
      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.480p.webm" type="video/webm" label="480P" selected="true">
      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.360p.webm" type="video/webm" label="360P">
      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.240p.webm" type="video/webm" label="240P">
   </video>

<script>
var options, player;
options = {
   controlBar: {
      children: [
         'playToggle',
         'progressControl',
         'volumePanel',
         'qualitySelector',
         'fullscreenToggle',
      ],
   },
};
player = videojs('mainvideo', options);
player.play();
</script>
</body>
ignacio-dev commented 1 year ago

Have you tried player.controlBar.addChild('QualitySelector') ?

sebabratakundu commented 1 year ago

same problem.