valor/layouts/shortcodes/video.html

137 lines
4.8 KiB
HTML
Raw Normal View History

2022-11-09 15:44:31 -05:00
<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>