player now supports multiple audio tracks
This commit is contained in:
@@ -463,18 +463,12 @@ const AnimePlayer = (function() {
|
||||
|
||||
hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
attachSubtitles(subtitles);
|
||||
els.video.addEventListener('loadedmetadata', () => {
|
||||
applyAniSkip(_malId, _currentEpisode);
|
||||
}, { once: true });
|
||||
initPlyr();
|
||||
els.video.addEventListener('canplay', () => {
|
||||
els.video.play().catch(() => {});
|
||||
}, { once: true });
|
||||
if (els.loader) els.loader.style.display = 'none';
|
||||
});
|
||||
hlsInstance.on(Hls.Events.ERROR, function (event, data) {
|
||||
if (data.fatal) setLoading("Playback Error: " + data.details);
|
||||
|
||||
els.video.play().catch(() => {});
|
||||
els.loader.style.display = 'none';
|
||||
});
|
||||
|
||||
} else {
|
||||
els.video.src = url;
|
||||
attachSubtitles(subtitles);
|
||||
@@ -499,10 +493,44 @@ const AnimePlayer = (function() {
|
||||
});
|
||||
}
|
||||
|
||||
function initPlyr() {
|
||||
function createAudioSelector(hls) {
|
||||
if (!hls.audioTracks || hls.audioTracks.length < 2) return;
|
||||
|
||||
const plyrEl = els.video.closest('.plyr');
|
||||
const controls = plyrEl.querySelector('.plyr__controls');
|
||||
if (!controls) return;
|
||||
|
||||
if (controls.querySelector('#audio-select')) return;
|
||||
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'plyr__control';
|
||||
|
||||
const select = document.createElement('select');
|
||||
select.id = 'audio-select';
|
||||
|
||||
hls.audioTracks.forEach((t, i) => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = i;
|
||||
opt.textContent = t.name || t.lang || `Audio ${i + 1}`;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
select.value = hls.audioTrack;
|
||||
|
||||
select.onchange = () => {
|
||||
hls.audioTrack = Number(select.value);
|
||||
};
|
||||
|
||||
wrapper.appendChild(select);
|
||||
controls.insertBefore(wrapper, controls.children[4]); // antes del volumen
|
||||
}
|
||||
|
||||
function initPlyr(enableAudio = false) {
|
||||
if (plyrInstance) return;
|
||||
|
||||
const settings = ['captions', 'quality', 'speed'];
|
||||
if (enableAudio) settings.unshift('audio');
|
||||
|
||||
plyrInstance = new Plyr(els.video, {
|
||||
captions: {
|
||||
active: true,
|
||||
@@ -520,7 +548,7 @@ const AnimePlayer = (function() {
|
||||
'mute', 'volume', 'captions', 'settings',
|
||||
'fullscreen', 'airplay'
|
||||
],
|
||||
settings: ['captions', 'quality', 'speed']
|
||||
settings
|
||||
});
|
||||
|
||||
const container = document.querySelector('.player-container');
|
||||
@@ -530,6 +558,10 @@ const AnimePlayer = (function() {
|
||||
const tracks = els.video.textTracks;
|
||||
if (tracks && tracks.length) tracks[0].mode = 'showing';
|
||||
|
||||
plyrInstance.on('ready', () => {
|
||||
if (hlsInstance) createAudioSelector(hlsInstance);
|
||||
});
|
||||
|
||||
plyrInstance.on('timeupdate', (event) => {
|
||||
const instance = event.detail.plyr;
|
||||
if (!instance.duration || _progressUpdated) return;
|
||||
|
||||
@@ -536,4 +536,15 @@ body.stop-scrolling {
|
||||
|
||||
.glass-btn-mpv:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
#audio-select {
|
||||
background: transparent;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
padding: 4px;
|
||||
}
|
||||
#audio-select option {
|
||||
color: black;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user