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>
|
||||
<time id="duration">00:00</time>
|
||||
</div>
|
||||
<button id="subtitles"><i class="fa-solid fa-subtitles"></i></button>
|
||||
<button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -81,6 +82,54 @@ function AddControls() {
|
|||
|
||||
function Util() {
|
||||
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
|
||||
const Button_PlayPause = document.querySelector('.plyx-player-controls #play-pause')
|
||||
|
||||
|
@ -246,11 +295,13 @@ function Util() {
|
|||
}
|
||||
|
||||
videoControls.classList.add('hide')
|
||||
subtitlesMenu.classList.add('hide')
|
||||
}
|
||||
|
||||
// Show_Controls displays the video controls
|
||||
function Show_Controls() {
|
||||
videoControls.classList.remove('hide')
|
||||
subtitlesMenu.classList.remove('hide')
|
||||
}
|
||||
video.addEventListener('mouseenter', Show_Controls)
|
||||
video.addEventListener('mouseleave', Hide_Controls)
|
||||
|
|
Reference in a new issue