https://www.lovelanddesign.com/root/Design/js/plyr-init.js

1$(document).ready(function () {
2  var setupPlayers = function () {
3    //var videoList = document.getElementsByTagName("video");
4    var plyrList = document.getElementsByClassName("plyr")
5
6    /*for (let v of videoList) {
7
8      const player = new Plyr(v, { captions: { active: true } });
9    }*/
10    for (let v of plyrList) {
11      //console.log(v);
12      const player = new Plyr(v, 
13        { 
14        captions: { active: true }, 
15        loadSprite: true, 
16        iconUrl: "/root/Design/images/plyr-sprites.svg" 
17      });
18    }
19  }
20
21
22  var page_InitSection = function () {
23    "use strict";
24    return {
25      init: function () {
26        //alert('Page is loaded');
27        setupPlayers();
28      }
29    };
30  }();
31
32  (function () {
33    page_InitSection.init();
34  })();
35  
36
37/*-------------- Accessibility -------------------*/
38var videoElements = document.querySelectorAll('video.plyr[autoplay][loop][muted]');
39
40function toggleVideo(video, button) {
41  if (video.paused || video.ended) {
42      video.play();
43      button.innerHTML = '<i class="fas fa-pause fa-xs"></i>';
44      button.title = 'Pause Video'; // Set title attribute for the button
45  } else {
46      video.pause();
47      button.innerHTML = '<i class="fas fa-play fa-xs"></i>';
48      button.title = 'Play Video'; // Set title attribute for the button
49  }
50}
51
52videoElements.forEach(function (video) {
53    // Create a new wrapper div
54    var wrapper = document.createElement('div');
55    wrapper.classList.add('accessible-playPauseButton-wrapper', 'position-relative');
56
57    // Create a new button element with the Font Awesome icon and text
58    var button = document.createElement('button');
59    button.title = 'Pause Video'; // Set title attribute for the button
60    button.classList.add('accessible-playPauseButton');//, 'button-cta', 'button-cta--small');
61    button.innerHTML = '<i class="fas fa-pause fa-xs"></i>'; 
62
63
64    wrapper.appendChild(button);
65
66    // Handle click event on the button
67    button.addEventListener('click', function () {
68        toggleVideo(video, button);
69    });
70
71    // Handle keyboard events
72    button.addEventListener('keydown', function (event) {
73        if (event.key === 'Enter' || event.key === 'Space') {
74            event.preventDefault(); // Prevent the default behavior (e.g., scrolling)
75            toggleVideo(video, button);
76        }
77    });
78
79    // Ensure the button is focusable with the keyboard
80    button.setAttribute('tabindex', '0');
81    video.setAttribute('tabindex', '0');
82
83    // Insert the wrapper immediately after the video element
84    video.parentNode.insertBefore(wrapper, video.nextSibling);
85
86    // Handle click event on the video element to toggle video
87    video.addEventListener('click', function () {
88        toggleVideo(video, button);
89    });
90});
91
92  
93});