The following is my code: I need to add a quality selector in a webpage which uses videojs. I am not sure on how to use the plugins, there weren't any examples of plugins in React. The way I inserted the plugins don't work. Please help
Videojs
<script src=".6.6/video.js"></script>
<script src=".js@latest"></script>
<script src=".1.2/videojs-ie8.min.js"></script>
<script src=".js"></script>
<script src=".1.4/videojs-overlay.min.js"></script>
<link href=";display=swap" rel="stylesheet">
<script src="../dist/silvermine-videojs-chromecast.min.js<?php echo "?".$version; ?>"></script>
<div class="col-sm-6">
<div class="video-player1">
<video autoplay id="example-video" class="video-js vjs-theme-fantasy custom-videojs" controls>
</video>
<script>
var options = {
html5: {
hlsjsConfig: {
// Put your hls.js config here
}
},
controls: true,
techOrder: [ 'chromecast', 'html5' ], // You may have more Tech, such as Flash or HLS
plugins: {
chromecast: {}
}
};
// setup beforeinitialize hook
videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
// here you can interact with hls.js instance and/or video.js playback is initialized
});
var player = videojs('example-video', options, function() {});
var overlay_content = '<div class="overlay_title"><div class="wrapper"><img src="images/nologo.jpg" align="middle" class="logoVideo" id="logovideo"> <div style="padding-left:10px"><h2 id="channeltitle" style="font-size: 22px;" ></h2><h4 id="descrtitle" style="font-size: 17px;"></h4></div></div><div id="progressp" class="progress-bar"><div id="progress_channel" class="progress"></div></div>';
player.overlay({
overlays: [{
start: 'useractive',
content: overlay_content,
end: 'userinactive',
align: 'bottom'
}]
});
function play(url) {
player.pause();
player.src({
src: url,
type: 'application/x-mpegURL'
});
player.load();
player.play();
// here you can interact with hls.js instance and/or video.js playback is initialized
}
</script>
The following is my code: I need to add a quality selector in a webpage which uses videojs. I am not sure on how to use the plugins, there weren't any examples of plugins in React. The way I inserted the plugins don't work. Please help
Videojs
<script src="https://vjs.zencdn/7.6.6/video.js"></script>
<script src="https://cdn.jsdelivr/npm/hls.js@latest"></script>
<script src="https://vjs.zencdn/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="https://cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/videojs-overlay/1.1.4/videojs-overlay.min.js"></script>
<link href="https://fonts.googleapis./css?family=Poppins&display=swap" rel="stylesheet">
<script src="../dist/silvermine-videojs-chromecast.min.js<?php echo "?".$version; ?>"></script>
<div class="col-sm-6">
<div class="video-player1">
<video autoplay id="example-video" class="video-js vjs-theme-fantasy custom-videojs" controls>
</video>
<script>
var options = {
html5: {
hlsjsConfig: {
// Put your hls.js config here
}
},
controls: true,
techOrder: [ 'chromecast', 'html5' ], // You may have more Tech, such as Flash or HLS
plugins: {
chromecast: {}
}
};
// setup beforeinitialize hook
videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
// here you can interact with hls.js instance and/or video.js playback is initialized
});
var player = videojs('example-video', options, function() {});
var overlay_content = '<div class="overlay_title"><div class="wrapper"><img src="images/nologo.jpg" align="middle" class="logoVideo" id="logovideo"> <div style="padding-left:10px"><h2 id="channeltitle" style="font-size: 22px;" ></h2><h4 id="descrtitle" style="font-size: 17px;"></h4></div></div><div id="progressp" class="progress-bar"><div id="progress_channel" class="progress"></div></div>';
player.overlay({
overlays: [{
start: 'useractive',
content: overlay_content,
end: 'userinactive',
align: 'bottom'
}]
});
function play(url) {
player.pause();
player.src({
src: url,
type: 'application/x-mpegURL'
});
player.load();
player.play();
// here you can interact with hls.js instance and/or video.js playback is initialized
}
</script>
2 Answers
Reset to default 3You can try to add this plugin: https://github./silvermine/videojs-quality-selector
You should add these imports on top:
<link href="https://unpkg./@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet">
<script src="./path/to/video.min.js"></script>
<script src="https://unpkg./@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>
and then you have to add the control to playerbar in this way:
player.controlBar.addChild('QualitySelector');
Below code is working fantastic:-
import React, { useRef, useState, useEffect, Fragment } from "react";
import videojs from "video.js";
import _ from "videojs-contrib-quality-levels";
import qualitySelector from "videojs-hls-quality-selector";
import "video.js/dist/video-js.css";
// those imports are important
const VideoPlayerHLS = () => {
const videoRef = useRef();
const [player, setPlayer] = useState(undefined);
const [callFinishVideoAPI, setCallFinishVideoAPI] = useState(false);
const [vidDuration, setVidDuration] = useState(50000);
const videoId = "e2280eeb-4cdb-43e7-a34f-36868326b8cb";
const thumbnailURL =
"https://vz-a2adf92d-b24.b-cdn/e2280eeb-4cdb-43e7-a34f-36868326b8cb/thumbnail.jpg";
const liveURL =
"https://vz-b4f1e97e-483.b-cdn/65c65840-de66-4c27-afd0-a3b5a904b768/playlist.m3u8";
useEffect(() => {
if (player) {
player.src({
src: liveURL,
type: "application/x-mpegURL",
withCredentials: false
});
player.poster("");
setCallFinishVideoAPI(false);
setVidDuration(50000);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [videoId, liveURL, thumbnailURL]);
useEffect(() => {
if (callFinishVideoAPI) {
//finishesVideo()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [callFinishVideoAPI]);
useEffect(() => {
const videoJsOptions = {
autoplay: false,
preload: "auto",
controls: true,
poster: "",
sources: [
{
src: liveURL,
type: "application/x-mpegURL",
withCredentials: false
}
],
html5: {
nativeAudioTracks: true,
nativeVideoTracks: true,
nativeTextTracks: true
}
};
const p = videojs(
videoRef.current,
videoJsOptions,
function onPlayerReady() {
// console.log('onPlayerReady');
}
);
setPlayer(p);
console.log(p.qualityLevels());
return () => {
if (player) player.dispose();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
if (player) {
player.hlsQualitySelector({ displayCurrentQuality: true });
}
}, [player]);
return (
<div data-vjs-player>
<video
ref={videoRef}
onLoadedMetadata={(e, px) => {
// console.log(e.target.duration);
setVidDuration(e.target.duration);
}}
onTimeUpdate={(e) => {
if (e.target.currentTime >= vidDuration - 10) {
setCallFinishVideoAPI(true);
}
}}
className="vidPlayer video-js vjs-default-skin vjs-big-play-centered"
></video>
</div>
);
};
export default VideoPlayerHLS;
Reference:-Video Quality Changer Videojs