因此,我正在尝试使用 glightbox biati-digital /glightbox制作我的视频/图像库,以播放具有多种流质量的 m3u8 文件,但无法使用 lightbox 实现它。我在这里找到了一个独立视频的解决方案Plyr + HLS.js & video quality Matthew Marino,但我的 js 还没有达到在 glightbox 中实现该解决方案的水平。任何想法如何让它工作?我尝试将代码传递给 glightbox.js,但这会破坏画廊 - 直接点击的视频不仅仅播放缓冲。
document.addEventListener('DOMContentLoaded', () => {
const source = '/2/hls_out.m3u8';
const video =
document.querySelector('video');
const controls = [
'play-large', // The large play button in
the center
'quality', // Restart playback
'rewind', // Rewind by the seek time (default 10 seconds)
'play', // Play/pause playback
'fast-forward', // Fast forward by the seek time (default 10 seconds)
'progress', // The progress bar and scrubber for playback and buffering
'current-time', // The current time of playback
'duration', // The full duration of the media
'mute', // Toggle mute
'volume', // Volume control
'captions', // Toggle captions
'settings', // Settings menu
'pip', // Picture-in-picture (currently Safari only)
'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
'fullscreen' // Toggle fullscreen
];
// For more options see:
https://github.com/sampotts/plyr/#options
// captions.update is required for
captions to work with hls.js
//// const player = new Plyr(video, {
controls }, { captions: { active: true,
update: true, language: 'en' }
////});
const defaultOptions = {controls:
["play", "progress","current-time","duration","volume", "settings", "download","fullscreen"
],urls: {
download: './2/3.mp4',
},};
if (!Hls.isSupported()) {
video.src = source;
var player = new Plyr(video, defaultOptions);
} else {
// For more Hls.js options, see https://github.com/dailymotion/hls.js
const hls = new Hls();
hls.loadSource(source);
// From the m3u8 playlist, hls parses the manifest and returns
// all available video qualities. This is important, in this approach,
// we will have one source on the Plyr player.
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
// Transform available levels into an array of integers (height values).
const availableQualities = hls.levels.map((l) => l.height)
availableQualities.unshift(0) //prepend 0 to quality array
// Add new qualities to option
defaultOptions.quality = {
default: 0, //Default - AUTO
options: availableQualities,
forced: true,
onChange: (e) => updateQuality(e),
}
// Add Auto Label
defaultOptions.i18n = {
qualityLabel: {
0: 'Auto',
},
}
hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
var span = document.querySelector(".plyr__menu__container [data-plyr='quality'][value='0'] span")
if (hls.autoLevelEnabled) {
span.innerHTML = `AUTO (${hls.levels[data.level].height}p)`
} else {
span.innerHTML = `AUTO`
}
})
// Initialize new Plyr player with quality options
var player = new Plyr(video, defaultOptions);
});
hls.attachMedia(video);
window.hls = hls;
}
function updateQuality(newQuality) {
if (newQuality === 0) {
window.hls.currentLevel = -1; //Enable AUTO quality if option.value = 0
} else {
window.hls.levels.forEach((level, levelIndex) => {
if (level.height === newQuality) {
console.log("Found quality match with " + newQuality);
window.hls.currentLevel = levelIndex;
}
});
}
}
});