Add Subtitle feature
This commit is contained in:
parent
4ff3447516
commit
e37198c8ad
1 changed files with 51 additions and 0 deletions
|
@ -64,6 +64,7 @@ function AddControls() {
|
||||||
<span> / </span>
|
<span> / </span>
|
||||||
<time id="duration">00:00</time>
|
<time id="duration">00:00</time>
|
||||||
</div>
|
</div>
|
||||||
|
<button id="subtitles"><i class="fa-solid fa-subtitles"></i></button>
|
||||||
<button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
|
<button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -81,6 +82,54 @@ function AddControls() {
|
||||||
|
|
||||||
function Util() {
|
function Util() {
|
||||||
const videoControls = document.querySelector('.plyx-player-controls')
|
const videoControls = document.querySelector('.plyx-player-controls')
|
||||||
|
// Subtitles
|
||||||
|
var subtitles = document.querySelector('.plyx-player-controls #subtitles');
|
||||||
|
var subtitleMenuButtons = [];
|
||||||
|
var createMenuItem = function(id, lang, label) {
|
||||||
|
var listItem = document.createElement('li');
|
||||||
|
var button = listItem.appendChild(document.createElement('button'));
|
||||||
|
button.setAttribute('id', id);
|
||||||
|
button.className = 'subtitles-button';
|
||||||
|
if (lang.length > 0) button.setAttribute('lang', lang);
|
||||||
|
button.value = label;
|
||||||
|
button.setAttribute('data-state', 'inactive');
|
||||||
|
button.appendChild(document.createTextNode(label));
|
||||||
|
button.addEventListener('click', function(e) {
|
||||||
|
subtitleMenuButtons.map(function(v, i, a) {
|
||||||
|
subtitleMenuButtons[i].setAttribute('data-state', 'inactive');
|
||||||
|
});
|
||||||
|
var lang = this.getAttribute('lang');
|
||||||
|
for (var i = 0; i < video.textTracks.length; i++) {
|
||||||
|
if (video.textTracks[i].language == lang) {
|
||||||
|
video.textTracks[i].mode = 'showing';
|
||||||
|
this.setAttribute('data-state', 'active');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
video.textTracks[i].mode = 'hidden';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
subtitlesMenu.style.display = 'none';
|
||||||
|
});
|
||||||
|
subtitleMenuButtons.push(button);
|
||||||
|
return listItem;
|
||||||
|
}
|
||||||
|
var subtitlesMenu;
|
||||||
|
if (video.textTracks) {
|
||||||
|
var df = document.createDocumentFragment();
|
||||||
|
var subtitlesMenu = df.appendChild(document.createElement('ul'));
|
||||||
|
subtitlesMenu.className = 'subtitles-menu';
|
||||||
|
subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'));
|
||||||
|
for (var i = 0; i < video.textTracks.length; i++) {
|
||||||
|
subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label));
|
||||||
|
}
|
||||||
|
videoContainer.appendChild(subtitlesMenu);
|
||||||
|
}
|
||||||
|
subtitles.addEventListener('click', function(e) {
|
||||||
|
if (subtitlesMenu) {
|
||||||
|
subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Play/Plause
|
// Play/Plause
|
||||||
const Button_PlayPause = document.querySelector('.plyx-player-controls #play-pause')
|
const Button_PlayPause = document.querySelector('.plyx-player-controls #play-pause')
|
||||||
|
|
||||||
|
@ -246,11 +295,13 @@ function Util() {
|
||||||
}
|
}
|
||||||
|
|
||||||
videoControls.classList.add('hide')
|
videoControls.classList.add('hide')
|
||||||
|
subtitlesMenu.classList.add('hide')
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show_Controls displays the video controls
|
// Show_Controls displays the video controls
|
||||||
function Show_Controls() {
|
function Show_Controls() {
|
||||||
videoControls.classList.remove('hide')
|
videoControls.classList.remove('hide')
|
||||||
|
subtitlesMenu.classList.remove('hide')
|
||||||
}
|
}
|
||||||
video.addEventListener('mouseenter', Show_Controls)
|
video.addEventListener('mouseenter', Show_Controls)
|
||||||
video.addEventListener('mouseleave', Hide_Controls)
|
video.addEventListener('mouseleave', Hide_Controls)
|
||||||
|
|
Reference in a new issue