diff --git a/src/functions/buttons.js b/src/functions/buttons.js
index fdbbc10..ea269fc 100644
--- a/src/functions/buttons.js
+++ b/src/functions/buttons.js
@@ -64,6 +64,7 @@ function AddControls() {
/
+
@@ -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)