<style> .video-player { display: flex; flex-direction: column; align-items: center; } .video-controls { display: flex; flex-direction: row; width: 100%; height: fit-content; } .video-controls p { width: min-content; } .media-seek { width: 100%; } .video-controls>* { margin: 5px; } .video-controls select, .video-controls button { background-color: transparent; border-color: var(--theme-accent); color: var(--theme-accent); border-radius: 3px; padding: 0.5rem; } .icon svg { width: 2.25rem; height: fit-content; z-index: -1; background-color: transparent; pointer-events: none; } .icon path, .icon rect { stroke: var(--theme-accent); fill: var(--theme-accent); } .icon svg circle { stroke: var(--theme-accent); fill: transparent; stroke-width: 6; } .video-player:fullscreen{ height:100vh; width:100vw; } .video-player:fullscreen video{ max-height: 100vh; height:100%; max-width: 100vw; width: 100vw; } </style> <script src="/js/icons.js"></script> <div class="media-container"> <div class="video-player"> <video preload="metadata" onclick="playthis(event)" onloadedmetadata="setup_video_metadata(event)" ontimeupdate="setup_video_metadata(event)"> <source src='{{.Site.BaseURL}}{{.Get "src" }}'> </video> <div class="video-controls"> <div onclick="toggle_video_play(event)" class="icon"> <svg viewBox="0 0 120 120"><circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /><path style="opacity:0.99;fill-opacity:1; stroke-width:4;stroke-dasharray:none;stroke-opacity:1" d="m 36.961917,29.902848 c 3.596357,-1.826163 63.333473,26.918008 63.449063,32.530093 0.1386,6.729203 -61.229407,35.615675 -63.254766,33.796117 -1.971501,-1.557746 -3.672784,-64.52183 -0.194297,-66.32621 z" id="path1060"> </svg> </div> </button> <input class="media-seek" type="range" onchange="update_video_time(event)" value="0"> <select onchange="update_video_speed(event)"> <option value="1" selected>1x</option> <option value="1.5">1.5x</option> <option value="2">2x</option> <option value="2.5">2.5x</option> <option value="3">3x</option> </select> <p><span class="audio-currentTime"></span><span class="audio-duration"></span></p> <div class="icon" onclick="fullscreen(event)"> <svg viewBox="0 0 120 120"> <path style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 46.964564,56.005523 29.64354,38.443145 15.744327,51.812481 15.624368,16.779513 l 36.623948,0.03226 -13.177737,14.17536 16.622539,16.392689 z" id="path8948-3"/> <path style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 55.129887,73.388205 38.422614,90.210417 51.067135,104.89922 16.395468,104.33333 16.434945,67.605641 30.111493,81.28219 46.504182,64.659651 Z" id="path8948-3-5"/> <path style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 63.363444,46.935211 80.997081,30.825588 67.627745,17.036604 102.68744,17.447746 102.62846,52.646518 88.168059,39.041226 71.989147,55.663767 Z" id="path8948-3-6"/> <path style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 71.956318,65.743071 91.343851,82.735377 104.06395,70.648701 103.79532,105.13832 69.166628,105.79193 82.579575,93.184265 63.227764,74.368773 Z" id="path8948-3-5-2"/> </svg> </div> </div> <script> function setup_video_metadata(event) { video = event.target; var seek = video.parentElement.children[1].children[1]; seek.min = 0; seek.max = video.duration; seek.value = video.currentTime; details = video.parentElement.children[1].children[3].children; details[0].innerHTML = timeToText(video.currentTime) + "/"; details[1].innerHTML = timeToText(video.duration); } function playthis(event) { if (event.target.paused) { event.target.playbackRate = video.parentElement.children[1].children[2].value; event.target.play(); video.parentElement.children[1].children[0].innerHTML = icons['pause']; } else { event.target.pause(); video.parentElement.children[1].children[0].innerHTML = icons['play']; } } function fullscreen(event) { video = event.target.parentElement.parentElement; if (document.fullscreenElement) { document.exitFullscreen(); event.target.innerHTML = icons['expand']; } else { video.requestFullscreen(); event.target.innerHTML = icons['shrink']; } } function toggle_video_play(event) { video = event.target.parentElement.parentElement.children[0]; if (video.paused) { video.playbackRate = video.parentElement.children[1].children[2].value; video.play(); video.parentElement.children[1].children[0].innerHTML = icons['pause']; } else { video.pause(); video.parentElement.children[1].children[0].innerHTML = icons['play']; } } function update_video_speed(event) { video = event.target.parentElement.parentElement.children[0]; video.playbackRate = event.target.value; } function update_video_time(event) { video = event.target.parentElement.parentElement.children[0]; video.currentTime = event.target.value; } function timeToText(t) { hours = 0; minutes = 0; seconds = 0; if (t > 60 * 60) { hours = Math.floor(t / 60 / 60); t = t - hours * 60 * 60; } if (t > 60) { minutes = Math.floor(t / 60); t = t - minutes * 60 } if (t > 1) { seconds = Math.floor(t); } text = ""; if (hours > 0) { text += hours + ":"; } if (minutes > 0 || hours > 0) { if (minutes == 0) { minutes = "00" } if (minutes < 10) { text += "0" } text += minutes + ":" } if (seconds == 0 && (minutes > 0 || hours > 0)) { seconds = "00"; } if (seconds < 10) { text += "0"; } text += seconds return text; } </script> </div> <noscript> <style> .video-player { display: none; } </style> <video controls preload="false"> <source src='{{.Site.BaseURL}}{{.Get "src" }}'> </video> </noscript> <p class="caption">{{.Get "caption"}} {{if .Get "source"}}<a href='{{.Get "source"}}'>Source</a>{{end}} </p> </div>