1const enVideoUtils = {} 2enVideoUtils.icons = { 3 playIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><use class="en-svg-shadow" xlink:href="#en-vp-icon-play"></use> <path id="en-vp-icon-play" d="M384 256L0 32V480L384 256z"/></svg>`, 4 restart: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><use class="en-svg-shadow" xlink:href="#en-vp-icon-restart"></use><path id="en-vp-icon-restart" d="M142.9 142.9L200 200l-24 24L16 224 16 64 40 40 97.6 97.6s0 0 0 0c87.5-87.5 229.3-87.5 316.8 0s87.5 229.3 0 316.8s-229.3 87.5-316.8 0l45.3-45.3c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3s-163.8-62.5-226.3 0c0 0 0 0 0 0z"/></svg>`, 5 pauseIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><use class="en-svg-shadow" xlink:href="#en-vp-icon-pause"></use><path id="en-vp-icon-pause" d="M128 64L0 64 0 448l128 0 0-384zm192 0L192 64l0 384 128 0 0-384z"/></svg>`, 6 mute: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><use class="en-svg-shadow" xlink:href="#en-vp-icon-mute"></use><path id="en-vp-icon-mute" d="M32 160l0 192 128 0L304 480l48 0 0-448-48 0L160 160 32 160zM441.6 332.8C464.9 315.3 480 287.4 480 256s-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l28.8 38.4zm57.6 76.8c46.6-35 76.8-90.8 76.8-153.6s-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2s-22.6 88.9-57.6 115.2l28.8 38.4z"/></svg>`, 7 unmute: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><use class="en-svg-shadow" xlink:href="#en-vp-play-icon"></use><path id="en-vp-icon-unmute" d="M48.4 14.8L29.4 .1 0 38l19 14.7L591.5 497.2l19 14.7L639.9 474l-19-14.7-95.1-73.8C557 351.3 576 305.9 576 256c0-62.8-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2c0 38.8-15.3 74-40.3 99.9l-38.2-29.7C468.3 308.7 480 283.7 480 256c0-31.4-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l5.9 7.9L352 250.5 352 32l-48 0L195.2 128.7 48.4 14.8zM352 373.3L81.2 160 32 160l0 192 128 0L304 480l48 0 0-106.7z"/></svg>`, 8 settings: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><use class="en-svg-shadow" xlink:href="#en-vp-play-icon"></use><path id="en-vp-icon-settings" d="M200 0L312 0l17.2 78.4c15.8 6.5 30.6 15.1 44 25.4l76.5-24.4 56 97-59.4 54.1c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l59.4 54.1-56 97-76.5-24.4c-13.4 10.3-28.2 18.9-44 25.4L312 512l-112 0-17.2-78.4c-15.8-6.5-30.6-15.1-44-25.4L62.3 432.5l-56-97 59.4-54.1C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L6.3 176.5l56-97 76.5 24.4c13.4-10.3 28.2-18.9 44-25.4L200 0zm56 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>`, 9 fullScreen: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><use class="en-svg-shadow" xlink:href="#en-vp-icon-fullscreen"></use><path id="en-vp-icon-fullscreen" d="M32 32L0 32 0 64l0 96 0 32 64 0 0-32 0-64 64 0 32 0 0-64-32 0L32 32zM64 352l0-32L0 320l0 32 0 96 0 32 32 0 96 0 32 0 0-64-32 0-64 0 0-64zM320 32l-32 0 0 64 32 0 64 0 0 64 0 32 64 0 0-32 0-96 0-32-32 0-96 0zM448 352l0-32-64 0 0 32 0 64-64 0-32 0 0 64 32 0 96 0 32 0 0-32 0-96z"/></svg>`, 10 exitFullScreen: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><use class="en-svg-shadow" xlink:href="#en-vp-icon-exit-fullscreen"></use><path id="en-vp-icon-exit-fullscreen" d="M160 64l0-32L96 32l0 32 0 64-64 0L0 128l0 64 32 0 96 0 32 0 0-32 0-96zM32 320L0 320l0 64 32 0 64 0 0 64 0 32 64 0 0-32 0-96 0-32-32 0-96 0zM352 64l0-32-64 0 0 32 0 96 0 32 32 0 96 0 32 0 0-64-32 0-64 0 0-64zM320 320l-32 0 0 32 0 96 0 32 64 0 0-32 0-64 64 0 32 0 0-64-32 0-96 0z"/></svg>`, 11 playSpeed: `<svg height='24' viewBox='0 0 24 24' width='24'><path d='M10,8v8l6-4L10,8L10,8z M6.3,5L5.7,4.2C7.2,3,9,2.2,11,2l0.1,1C9.3,3.2,7.7,3.9,6.3,5z M5,6.3L4.2,5.7C3,7.2,2.2,9,2,11 l1,.1C3.2,9.3,3.9,7.7,5,6.3z M5,17.7c-1.1-1.4-1.8-3.1-2-4.8L2,13c0.2,2,1,3.8,2.2,5.4L5,17.7z M11.1,21c-1.8-0.2-3.4-0.9-4.8-2 l-0.6,.8C7.2,21,9,21.8,11,22L11.1,21z M22,12c0-5.2-3.9-9.4-9-10l-0.1,1c4.6,.5,8.1,4.3,8.1,9s-3.5,8.5-8.1,9l0.1,1 C18.2,21.5,22,17.2,22,12z' fill='white'></path></svg>`, 12 quality: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><use class="en-svg-shadow" xlink:href="#en-vp-icon-quality" ></use><path id="en-vp-icon-quality" d="M0 416c0 13.3 10.7 24 24 24l59.7 0c10.2 32.5 40.5 56 76.3 56s66.1-23.5 76.3-56L488 440c13.3 0 24-10.7 24-24s-10.7-24-24-24l-251.7 0c-10.2-32.5-40.5-56-76.3-56s-66.1 23.5-76.3 56L24 392c-13.3 0-24 10.7-24 24zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-35.8 0-66.1 23.5-76.3 56L24 232c-13.3 0-24 10.7-24 24s10.7 24 24 24l251.7 0c10.2 32.5 40.5 56 76.3 56s66.1-23.5 76.3-56l59.7 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-59.7 0c-10.2-32.5-40.5-56-76.3-56zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm76.3-56C258.1 39.5 227.8 16 192 16s-66.1 23.5-76.3 56L24 72C10.7 72 0 82.7 0 96s10.7 24 24 24l91.7 0c10.2 32.5 40.5 56 76.3 56s66.1-23.5 76.3-56L488 120c13.3 0 24-10.7 24-24s-10.7-24-24-24L268.3 72z"/></svg>`, 13 closedSubtitle: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><use class="en-svg-shadow" xlink:href="#en-vp-icon-subtitle"></use><path id="en-vp-icon-subtitle" d="M0 96C0 60.7 28.7 32 64 32l448 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM200 208c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48s21.5-48 48-48zm144 48c0-26.5 21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48z"/></svg>`, 14 subtitle: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><use class="en-svg-shadow" xlink:href="#en-vp-icon-closed-subtitle"></use><path id="en-vp-icon-closed-subtitle" class="fa-secondary" opacity="1" fill="#ff0000" d="M0 96C0 60.7 28.7 32 64 32l448 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM104 256c0 53 43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48s21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96zm192 0c0 53 43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48s21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96z"/><path class="fa-primary" fill="#ffffff" d="M152 256c0-26.5 21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48zm192 0c0-26.5 21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48z"/></svg>`, 15 missingSubtitle: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewB
15ox="0 0 576 512"> 16 <use class="en-svg-shadow" xlink:href="#en-vp-icon-missing-subtitle" /> 17 <path id="en-vp-icon-missing-subtitle" 18 d="M0 96C0 60.7 28.7 32 64 32l448 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM200 208c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48s21.5-48 48-48zm144 48c0-26.5 21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48z" 19 opacity="0.7"/> 20 <line x1="72" y1="99" x2="504" y2="413" stroke="white" stroke-width="40"></line> 21</svg>`, 22 exclamationMark:`<svg fill="#999" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.963 27.963"><path d="M13.983 0C6.261 0 .001 6.259.001 13.979c0 7.724 6.26 13.984 13.982 13.984s13.98-6.261 13.98-13.984C27.963 6.259 21.705 0 13.983 0zm0 26.531c-6.933 0-12.55-5.62-12.55-12.553 0-6.93 5.617-12.548 12.55-12.548 6.931 0 12.549 5.618 12.549 12.548-.001 6.933-5.619 12.553-12.549 12.553z"/><path d="M15.579 17.158l.612-12.579h-4.387l.61 12.579zm-1.581 1.388c-1.471 0-2.5 1.029-2.5 2.526 0 1.443.999 2.528 2.444 2.528h.056c1.499 0 2.469-1.085 2.469-2.528-.026-1.497-.999-2.526-2.469-2.526z"/></svg>` 23} 24 25enVideoUtils.innerHTML = `<div id="envideo"> 26 <video id="mainVideo" playsinline part="video" disablePictureInPicture ></video> 27 <div class='en-spinner'> 28 <div class='en-spinner-container'> 29 <div class='en-spinner-rotator'> 30 <div class='en-spinner-left'> 31 <div class='en-spinner-circle'></div> 32 </div> 33 <div class='en-spinner-right'> 34 <div class='en-spinner-circle'></div> 35 </div> 36 </div> 37 </div> 38 <div class='en-spinner-message' style='display: none;'></div> 39 </div> 40 <div class="middle-box" role="status"> 41 <div class="middle-box-inner"> 42 <div class="middle-box-icon"></div> 43 </div> 44 </div> 45 <div class='subtitle-container'> 46 <span></span> 47 </div> 48 <div class='video-controller hidden'> 49 <div class='player-options-wrapper en-vp-popup hidden'> 50 <div class='player-option-menu'> 51 <div class='player-option play-speed' title='Play Speed'> 52 <div class='player-option-icon'> ${enVideoUtils.icons.playSpeed} </div> 53 <div class='player-option-label'><span class=''>Play Speed</span> </div> 54 <div class='player-option-content'> 55 <select name='play-speed' id='play-speed'> 56 <option value='0.25'>0.25</option> 57 <option value='0.5'>0.5</option> 58 <option value='0.75'>0.75</option> 59 <option value='1' selected>1</option> 60 <option value='1.25'>1.25</option> 61 <option value='1.5'>1.5</option> 62 <option value='1.75'>1.75</option> 63 <option value='2'>2</option> 64 </select> 65 </div> 66 </div> 67 </div> 68 </div> 69 <div id='preview-container'> 70 <div class='preview-container-inner'> 71 <video style="display:none;" ></video> 72 <canvas></canvas> 73 <span></span> 74 </div> 75 </div> 76 <div class='controller-container'> 77 <div class='progress-bar-container'> 78 <div class='progress-bar'> 79 <div class='progress-indicator'></div> 80 <div class='en-hover-progress en-hover-progress-light'></div> 81 </div> 82 </div> 83 <div class='en-vp-controls'>
84 <div class='en-vp-left-controls'> 85 86 <button class='en-vp-control-btn en-vp-control-play' aria-keyshortcuts="k" aria-label="Play keyboard shortcut k" title='Play (k)'>${enVideoUtils.icons.playIcon}</button> 87 88 <button class='en-vp-control-btn en-vp-control-pause hidden' aria-keyshortcuts="k" aria-label="Pause keyboard shortcut k" title='Pause (k)'>${enVideoUtils.icons.pauseIcon}</button> 89 <button class='en-vp-control-btn en-vp-control-restart hidden' aria-label="Restart" title='Restart'>${enVideoUtils.icons.restart}</button> 90 <button class='en-vp-control-btn en-vp-control-play-next hidden' aria-label="Play Next" title='Play Next'>${enVideoUtils.icons.playNext}</button> 91 <div class='sound'> 92 <button class='en-vp-control-btn en-vp-control-mute' aria-keyshortcuts="m" aria-label="Mute keyboard shortcut m" title='Mute (m)'>${enVideoUtils.icons.mute}</button> 93 <button class='en-vp-control-btn en-vp-control-unmute hidden' aria-keyshortcuts="m" aria-label="Unmute keyboard shortcut m" title='Unmute (m)'>${enVideoUtils.icons.unmute}</button> 94 <span class='volume-container'> 95 <input type='range' min='0' max='1' step='0.05' aria-keyshortcuts="+,-" aria-label="Volume keyboard shortcuts + and -" class='sound-volume' title='Volume (+, -)' > 96 </span> 97 </div> 98 <span class='time-stamp'> 99 <span class='current-time'>00:00</span> <span class='separator'> /</span> <span class='total-time'>00:00</span> 100 </span> 101 </div> 102 <div class='en-vp-right-controls'> 103 <button class='en-vp-control-btn en-vp-control-subtitle' aria-keyshortcuts="c" aria-label="Toggle Subtitles (c)" title='subtitle'>${enVideoUtils.icons.closedSubtitle}</button> 104 <button class='en-vp-control-btn en-vp-control-settings' aria-label="Settings" title='Settings'>${enVideoUtils.icons.settings}</button> 105 <button class='en-vp-control-btn en-vp-control-fullscreen' aria-keyshortcuts="f" aria-label='Full screen keyboard shortcut f' title='Full Screen (f)'>${enVideoUtils.icons.fullScreen} </button> 106 <button class='en-vp-control-btn en-vp-control-fullscreen-exit hidden' aria-keyshortcuts="f" aria-label='Exit Full Screen keyboard shortcut f' title='Exit Full Screen (f)'> ${enVideoUtils.icons.exitFullScreen} </button> 107 </div> 108 </div> 109 </div> 110 </div> 111 <div class='gradient-bottom'></div> 112 <div id="video-available-message"> 113 <div class="error-icon">${enVideoUtils.icons.exclamationMark}</div> 114 <span>This video is not available</span> 115 </div> 116 </div>`; 117 118enVideoUtils.toggleVisibility = (elements, visible) => { 119 elements.forEach(el => { 120 if (visible) { 121 el.classList.remove('hidden'); 122 } else { 123 el.classList.add('hidden'); 124 } 125 }); 126} 127 128enVideoUtils.hide = (...elements) => { 129 this.toggleVisibility(elements, false); 130} 131 132enVideoUtils.show = (...elements) => { 133 this.toggleVisibility(elements, true); 134} 135 136enVideoUtils.debounce = (func, wait) => { 137 let timeout; 138 return function () { 139 const context = this, args = arguments; 140 clearTimeout(timeout); 141 timeout = setTimeout(() => func.apply(context, args), wait); 142 }; 143} 144 145enVideoUtils.isEmpty = (val) => { 146 return val === undefined || val === null || val === '' || (Array.isArray(val) && val.length === 0); 147} 148 149enVideoUtils.screenMode = { 150 smallMode: 'small-mode', 151 tabletMode: 'tablet-mode', 152 desktopMode: 'desktop-mode', 153 largeMode: 'large-mode' 154} 155 156enVideoUtils.playStatus = { 157 pause : "pause", 158 play: "play", 159 end: "end" 160} 161 162enVideoUtils.Browser = { 163 Chrome : "chrome", 164 Safari: "safari", 165 Firefox: "firefox", 166 InternetExplorer: 'internet-explorer', 167 Edge: 'edge', 168 Opera: 'opera' 169} 170 171enVideoUtils.Platform = { 172 IOS:'ios', 173 Android:'android', 174 Windows:'windows', 175 Desktop: 'desktop' 176}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.