<style> .video-player{ display: flex; flex-direction: column; align-items: center; } .media-container{ width:fit-content; } .video-controls{ display:flex; flex-direction: row; width:100%; } .video-controls p{ width:min-content; } .media-seek{ width:100%; } </style> <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"> <button onclick="toggle_video_play(event)">Play</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> <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="Pause"; } else{ event.target.pause(); video.parentElement.children[1].children[0].innerHTML="Play"; } } 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="Pause"; } else{ video.pause(); video.parentElement.children[1].children[0].innerHTML="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 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>