VideoJS plugin that leverages videojs-contrib-quality-levels plugin to offer manual user-select able level selection options for adaptive http streams.
License: MIT License
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
when we change the type of the media source from application/dash+xml to application/xml+dash the quality change was not triggering so we are unable to change the quality of the video.
if we use the application/dash+xml type for the source when we get an error while downloading the chunks videoJs error event was not triggering so we changed we want to change type
when we change type from application/dash+xml to application/xml+dash we got this issue
- videojs-http-streaming "1.1.6"
- video.js 7.6.6
Above screenshot was the actual behaviour of gear icon which was used to change quality before changing type
The above was the reference screenshot , after changing type when we click on quality change gear icon it remains same with no action
can we have any approach to solve this ?
is issue with the type that i had used or videojs-http-source-selector has an issue with this type
Can the console.log be removed the the minified not debug versions?
In desktop devices, while hovering on Source Menu Button, menu items are coming to select quality manually, but in ipad devices menu items are not coming. I tried by adding vjs-hover class in onclick event also, but its not working. Is there any way to show menu items in ipad devices or mobile devices.
Is it possible to integrate this video.js plugin into the popular vue-video-player which is based on video.js?
https://github.com/surmon-china/vue-video-player
Presently there are two options for default bitrate: low and high. I have a broadcast with:
I wish to default to 480p, but low sets it to 270p and high sets it to 1080p
I would prefer if I could do something like:
default: 480If there is no "480p" then this could find the closest match (540p in my case)
I have installed this plugin along with videojs-contrib-quality-levels and videojs-contrib-dash for my dash manifest player, and I have initialized player.httpSourceSelector(); in my script. Setting the httpSourceSelector to high or low is correctly retrieving the high or low source, however I seem to be missing the cog icon from my player
Hi,
i tried https://vod.dev on my android device with ff 68.8.1 and there is no button for selecting quality.
is this known/excpected?
v1.1.6 with video.js 8.5.2 not works:
_this = _MenuButton.call(this, player, options) || this;
where _MenuButton is - class un
Hi,
I've tested videojs-http-source-selector v1.1.6 with videojs-contrib-quality-levels v4.0.0 and video.js v8.6.0, but I get this error:
My code looks like this:
<head>
<link href="https://unpkg.com/[email protected]/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-quality-levels/4.0.0/videojs-contrib-quality-levels.min.js" integrity="sha512-3Jrm6nQebMfkSWFmpC12Nhzn1R87CfrzCXJfhvTxmEyml05sUr3Fw37Aiazh1Fo9HKuYEzi0oluFjBvdOW8aPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/[email protected]/dist/videojs-http-source-selector.min.js"></script>
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="player"
class="video-js"
width="720"
height="400"
>
</video>
<script>
videojs.Vhs.xhr.beforeRequest = function(options) {
if (options.headers == undefined){
options.headers = {}
}
options.headers["Custom-Header"] = "Custom"
return options;
};
var options =
{
controls: true,
preload: 'auto',
plugins: {
httpSourceSelector:
{
default: 'auto'
}
}
}
var url = 'https://my.streaming.url/encrypted-slug';
var player = videojs('player', options);
player.httpSourceSelector();
player.src({ type: "application/x-mpegurl", src: url });
</script>
</body>
Could anyone help with this?
Thank you!
I checked https://vod.dev/ , and my own player where I'm using this. The gear icon to change the video resolution doesn't show in iOS (Safari, Chrome, Firefox) or Android (Chrome).
Seems to be a bug, because I'm able to get the options when viewing a YouTube video in the browser (I know, YouTube uses their own player and not VideoJS, but my point is that it is possible).
Please help!
Thanks.
Hello!
I've been playing around with your plugin and I noticed that the selection of qualities max out at 1080p even though my streams have support for up to 8k. I was wondering if we could get support for higher quality streams?
I may be interested in tackling this issue myself if time permits. I wanted to put this issue out here first in case anyone else wants to do it.
I'm playing a pre-roll ad (using the IMA plugin) and then loading HLS live streaming content.
When the ad plays, SourceMenuButton.prototype.update gets called, which calls MenuButton.prototype.update, which sees that the number of items (0) is less than or equal to the threshold (0) and hides the button.
When the ad finishes and the content plays, SourceMenuButton.prototype.update is not called, and so the button is never displayed.
I'm not sure what the "appropriate" solution is to this since I don't have a firm grasp of VideoJS plugin development and best practice, but as a hack it can be solved by adding the following line to the constructor for SourceMenuButton:
player.on(["loadedmetadata"], this.update.bind(this));Hi, I'm running the following code:
window.videojs = require('video.js/dist/video.min');
require('dashjs');
require('videojs-contrib-dash');
require('videojs-contrib-quality-levels');
require('videojs-http-source-selector');
(function(window, videojs) {
var player = window.player = videojs('d6f7dff8a0edc4aed76c98c27a626ddd');
player.httpSourceSelector();
}(window, window.videojs));but I keep getting: Uncaught TypeError: player.httpSourceSelector is not a function
Any ideas?
Hello ,
Thanks for the good work but i suggest that instead of having the quality selector on the setting button, it should be on the side like [this].(https://i.gyazo.com/80440351324b4770fc19dcec9c881217.png).This is because the settings button have other options like speed
i'm begging you, remove console.log from plugin.js
It is possible to change/add the menu button text label with the current resolution selected? Or a simple HD badge when a hd resolution are selected.
Thanks
I have configured the video.js player with this plugin with the following settings as per the readme:
.This){kind=link}
plugins: {
httpSourceSelector: {
default: 'high',
},
}However, where the video element is nested inside of an element which is not full screen width the selector is defaulting to 720p instead of 1080p, whilst the higher option is actually present in the list for the user to manually select.
If i move the video outside of the nested element so it has full width it does then default to 1080p.
Is it possible to either:
Many thanks in advance and also ๐ for a great plugin
Video.js 7.21.1
videojs-contrib-quality-levels @Version 3.0.0
videojs-http-source-selector v1.1.5
i in my scrpt add
if (player.qualityLevels().length==0) {
document.getElementsByClassName("vjs-http-source-selector vjs-menu-button vjs-menu-button-popup vjs-control vjs-button")[0].style.display = 'none';
}
else {
document.getElementsByClassName("vjs-http-source-selector vjs-menu-button vjs-menu-button-popup vjs-control vjs-button")[0].style.display = 'block';
};
it's setInterval,so not good,i want to know player.qualityLevels().length has something the best time,or some other way to change that
Would it be possible to trigger an event like qualitySelected when a user click on the menu list item?
It could be useful to track users' preference among the listed choices.
I think the problem is the else if statement here:
https://github.com/pivotshare/videojs-http-source-selector/blob/1976dc8b15db269c9e25b2546a2a989add001fbe/src/components/SourceMenuButton.js#L103
I think just change it to an if statement
I just got around to making a pull request but was beaten to the punch by @leonklingele
In the process of forking, cloning, NPM installing, and starting to work, I noticed the following from npm audit:
found 321 vulnerabilities (3 low, 2 moderate, 314 high, 2 critical) in 11672 scanned packages
run `npm audit fix` to fix 318 of them.
3 vulnerabilities require manual review. See the full report for details.
Running npm audit fix updates jsdoc from ^3.4.3 to ^3.6.3 and resolves 318 of the issues
The remaining 3 issues are all "low" severity and all derive from the braces sub-dependency (used by both qunitjs and rollup-watch). Since they're both pulling in braces from micromatch, it may make more sense for micromatch to update those? I'm not entirely sure what the process is when a sub-dependency has a security issue like that.
Hi! I was wondering if anyone knew of any alternatives to this project. It seems that it's not really being actively maintained anymore judging by the amount of open issues and PRs. Thanks!
Plugin failing to work with DASH videos.
I checked out the DEMO at https://vod.dev/ but it uses m3u.....
Am i missing something??? I cant seem to make this plugin to show qualities with DASH streams.
at video.js 8.2.1 the icon change like that
Sometimes when selecting a bitrate I received a console error that JavaScript could not access the property qualityLevels of null.
Tracing it I noticed that this occurred inside of the SourceMenuItem.prototype.handleClick method. At the top of the for-loop this.player() would return a player instance. At the bottom of the for-loop (after one or two iterations) this.player() would return null.
Given that all the loop is doing is calling this.player().qualityLevels()[i].enabled = <value>, this tells me that one of two things is happening:
this.player() is getting updated between iterations of the loop (race condition)enabled is producing unexpected side effectsI'm not sure why the issue was occurring, but found it could be fixed by caching qualityLevels like so:
var qualityLevels = this.player().qualityLevels();
for (var i = 0; i < qualityLevels.length; i++) {
//If this is the Auto option, enable all renditions for adaptive selection
if (this.options_.index == qualityLevels.length) {
qualityLevels[i].enabled = true;
} else if (i == this.options_.index) {
qualityLevels[i].enabled = true;
} else {
qualityLevels[i].enabled = false;
}
}Hi,
after building the plugin and importing in my project, trying to run the project gives me the following error :
videojs-http-source-selector.es.js:57 Uncaught ReferenceError: videojs is not defined
at eval (videojs-http-source-selector.es.js:57)
at Module../node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.es.js (bundle.js:704)
at __webpack_require__ (bundle.js:20)
at eval (index.js:6)
at Module../index.js (bundle.js:97)
at __webpack_require__ (bundle.js:20)
at bundle.js:84
at bundle.js:87
after some digging, seems like this is a problem related to this generator-videojs-plugin issue, which happened because of something funky with rollup.
How to resolve this? Any help is much appreciated.
On iPhnones the native player starts up, you can select the audio track and even subtitles (which are actually not in the playlist .m3u8)
On Safari It is launched not in the native, but there are also no buttons with a choice of sources.
Is it possible to implement this feature for i-devices?
I have full-screen button disabled and getting an exception like this in the console:
VIDEOJS: ERROR: TypeError: Cannot read property 'el' of undefined
I believe the root of the issue is here:
player.videojs_http_source_selector_initialized = true;
var controlBar = player.controlBar,
fullscreenToggle = controlBar.getChild('fullscreenToggle').el();
controlBar.el().insertBefore(controlBar.addChild('SourceMenuButton').el(), fullscreenToggle);Changing it to
var controlBar = player.controlBar,
fullscreenToggle = controlBar.getChild('fullscreenToggle');
if (fullscreenToggle) {
controlBar.el().insertBefore(controlBar.addChild('SourceMenuButton').el(), fullscreenToggle.el());
} else {
controlBar.el().appendChild(controlBar.addChild('SourceMenuButton').el());
}
Fixes the issue, I'll open a PR in a sec.
Version: 1.1.6
If I change the quality on auto, the before elective choice remains marked. See picture
Proposal: If I select auto, even auto should be marked.
Thanks in advance
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google โค๏ธ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.