valor/layouts/shortcodes/video.html

<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>