You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
232 lines
14 KiB
HTML
232 lines
14 KiB
HTML
<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,
|
|
.icon svg>rect {
|
|
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>
|
|
<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 width="120" height="120" viewBox="0 0 120 120">
|
|
<path style="opacity:0.99;fill-opacity:1;stroke-width:6.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" sodipodi:nodetypes="cscc" />
|
|
<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" />
|
|
</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 width="120" height="120" 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();
|
|
var icon = "<svg width = \"120\" height = \"120\" viewBox = \"0 0 120 120\" > <g id=\"layer1\" > <circle =\"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\" /> <rect style =\"opacity:0.99;fill-opacity:1;stroke-width:3.2;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" id =\"rect2858\" width =\"13.503889\" height =\"74.311569\" x =\"37.891518\" y =\"25.657549\" /> <rect style =\"opacity:0.99;fill-opacity:1;stroke-width:3.2;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" id =\"rect2858-3\" width =\"13.503889\" height =\"74.311569\" x =\"67.821785\" y =\"25.526461\" /> </g > </svg>"
|
|
video.parentElement.children[1].children[0].innerHTML = icon;
|
|
}
|
|
else {
|
|
event.target.pause();
|
|
var icon = "<svg width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"><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\" sodipodi:nodetypes=\"cscc\" /> <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\" /></svg>";
|
|
video.parentElement.children[1].children[0].innerHTML = icon;
|
|
}
|
|
}
|
|
function fullscreen(event) {
|
|
video = event.target.parentElement.parentElement;
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
var icon = "<svg width=\"120\" height=\"120\" 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\" sodipodi:nodetypes=\"cccccccc\" /> <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\" sodipodi:nodetypes=\"cccccccc\" /> <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\" sodipodi:nodetypes=\"cccccccc\" /> <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\" sodipodi:nodetypes=\"cccccccc\" /></svg>";
|
|
event.target.innerHTML = icon;
|
|
}
|
|
else {
|
|
video.requestFullscreen();
|
|
var icon = "<svg width=\"120\" height=\"120\" 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 24.352868,16.779459 41.673892,34.341837 55.573105,20.972501 55.693064,56.005469 19.069116,55.973209 32.246853,41.797849 15.624314,25.40516 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 16.395415,96.170716 33.102688,79.348504 20.458167,64.659701 55.129834,65.225591 55.090357,101.95328 41.413809,88.276731 25.02112,104.89927 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 102.6875,25.765108 85.05386,41.874731 97.415443,56.469918 63.061175,56.361101 63.422481,20.053801 77.882882,33.659093 94.061794,17.036552 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 95.335449,105.79197 76.351017,88.674877 64.23557,102.19642 63.496447,66.396722 98.32669,66.448539 85.921496,80.567834 104.064,97.166269 Z\" id=\"path8948-3-5-2\" /></svg>";
|
|
event.target.innerHTML = icon;
|
|
}
|
|
|
|
|
|
}
|
|
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();
|
|
var icon = "<svg width = \"120\" height = \"120\" viewBox = \"0 0 120 120\" > <g id=\"layer1\" > <circle =\"opacity:0.99;fill=fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1\" id =\"path2040\" cx =\"60.062084\" cy =\"62.077591\" r =\"52.403164\" /> <rect style =\"opacity:0.99;fill-opacity:1;stroke-width:3.2;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" id =\"rect2858\" width =\"13.503889\" height =\"74.311569\" x =\"37.891518\" y =\"25.657549\" /> <rect style =\"opacity:0.99;fill-opacity:1;stroke-width:3.2;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" id =\"rect2858-3\" width =\"13.503889\" height =\"74.311569\" x =\"67.821785\" y =\"25.526461\" /> </g > </svg>";
|
|
video.parentElement.children[1].children[0].innerHTML = icon;
|
|
}
|
|
else {
|
|
video.pause();
|
|
var icon = "<svg width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"><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\" sodipodi:nodetypes=\"cscc\" /> <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\" /></svg>";
|
|
video.parentElement.children[1].children[0].innerHTML = icon;
|
|
}
|
|
}
|
|
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> |