Использование HLS. js
(() => {
var video = document.getElementById('video');
console.log('VIDEO',video);
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
//https://github.com/video-dev/hls.js/blob/master/docs/API.md#quality-switch-control-api
//console.log('RAHUL',hls.levels);
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
video.addEventListener('canplaythrough', () => {
var promise = video.play();
if (promise !== undefined) {
promise.catch(function(error) {
console.error('Auto-play was prevented');
}).then(function() {
console.info('Auto-play started');
});
}
});
})();
В этом потоке я могу получить уровни или качества, которые у меня есть для видео, но элементы управления не отображаются в видеопроигрывателе. как мы можем получить это.
Использование видео. js
(() => {
let source = document.getElementById('video-source');
console.log('RAHUL',source);
source.src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
source.type = 'application/x-mpegURL';
})()
<video
id="videoJS"
class="video-js vjs-4-3 vjs-big-play-centered"
controls = "true"
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}">
<source id = "video-source" src="" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
Та же проблема возникает и для видео Js. Я не могу увидеть элементы управления, что мне не хватает.
Вещи, которые я изучил. https://www.npmjs.com/package/videojs-hls-quality-selector Каждый раз, когда я добавляю это, я получаю hlsQualitySelector, а не функцию. И для hls. js я получил // https://github.com/video-dev/hls.js/blob/master/docs/API.md#quality -switch-control-api , который объясняет это, но нужно ли мне иметь свой собственный интерфейс для этого.
Я использую Обычную ваниль JS и HTML для этого проекта.