tomexsans / videojs-quality-selector-hls Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
I just looked into a project I am working on and wanted to finally upgrade to Video.JS 8โฆ but the previous quality selector still is stuck at v7 and incompatible with v8.
So, I wanted to thank you for the effort to upgrade this package and release it on NPM.
One thing I found in the readme document. In the Vue example you have a bit of a typo (a very consistent one but allas):
qalitySelectorHls
should probably be qualitySelectorHls
.
In this segment:
<script setup>
import 'video.js/dist/video-js.css'
import { ref,onMounted } from 'vue';
import videojs from 'video.js';
import 'videojs-contrib-quality-levels';
import qalitySelectorHls from 'videojs-quality-selector-hls'
const videoPlayer = ref(null)
onMounted(()=>{
// In case an error where qualitySelectorHls not found
videojs.registerPlugin('qalitySelectorHls',qalitySelectorHls);
const player = videojs(videoPlayer.value)
player.qalitySelectorHls()
})
</script>
Cheers, Chris
When I change quality the new segments are not downloaded, and are only downloaded when I seek ahead or back.
Demo here:
https://stackblitz.com/edit/angular-videojs-nvtfb7?file=src%2Fapp%2Fapp.component.ts
Steps to reproduce:
Is it possible to setting plugin like that?
This plugin doesn't work at all due to a change compared to the original version. The event listener is only bound after the ready event is observed, but by then the quality level events have been already sent, so this plugin misses them all.
Hi I am trying to add this plugin in my react app in I am getting error
this is my code
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "@videojs/themes/dist/city/index.css";
import "videojs-contrib-quality-levels";
import qualitySelectorHls from "videojs-quality-selector-hls";
const videoJsOptions = {
autoplay: true,
controls: true,
responsive: true,
height: "500px",
disablePictureInPicture: true,
enableSmoothSeeking: true,
experimentalSvgIcons: true,
playbackRates: [0.5, 0.75, 1, 1.5, 2],
controlBar: {
skipButtons: {
backward: 10,
forward: 10,
},
qualitySelector: true
},
userActions: {
hotkeys: true,
},
sources: [
{
// src: "http://192.168.1.139:5000/hls/subject27/video-chunk/video-chunk_master.m3u8",
src: "http://192.168.1.87:5000/hls/abc/chunk1/chunk1_master.m3u8",
type: "application/x-mpegURL",
},
],
};
React.useEffect(() => {
if (!playerRef.current) {
const videoElement = document.createElement("video-js");
videojs.registerPlugin("qalitySelectorHls", qualitySelectorHls);
videoElement.classList.add("vjs-big-play-centered");
videoRef.current.appendChild(videoElement);
const player = (playerRef.current = videojs(videoElement, options, () => {
player.qualityLevels();
videojs.log("player is ready");
onReady && onReady(player);
player.qualitySelectorHls({
displayCurrentQuality: true,
placementIndex: 13,
vjsIconClass: "vjs-icon-hd",
});
}));
player.on("play", () => {
const playerCurrentTime = player.currentTime();
console.log(
playerCurrentTime ? "played" : "Started",
playerCurrentTime
);
});
player.on("pause", () => {
const totalTime = player.duration();
const playerCurrentTime = player.currentTime();
console.log(playerCurrentTime == totalTime ? "Ended" : "paused");
});
} else {
const player = playerRef.current;
player.autoplay(options.autoplay);
player.src(options.sources);
player.on("start", () => {
console.log("start");
});
}
}, [options, videoRef]);
dependency versions:
"video.js": "^8.12.0",
"videojs-quality-selector-hls": "^1.1.1"
error
videojs-quality-selector-hls.js?v=c0159efe:123 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
at QualitySelectorHlsClass2.setButtonInnerText (videojs-quality-selector-hls.js?v=c0159efe:123:74)
at QualitySelectorHlsClass2.createQualityButton (videojs-quality-selector-hls.js?v=c0159efe:118:12)
at _Player. (videojs-quality-selector-hls.js?v=c0159efe:92:15)
at chunk-2KEIFEIH.js?v=c0159efe:13384:7
please help me resolve this issue
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.