media enhancements
parent
6508941a0f
commit
dcfca7e019
@ -1,3 +1,126 @@
|
||||
<audio controls>
|
||||
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
|
||||
</audio>
|
||||
<style>
|
||||
.media-container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
.audio-player p{
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.media-seek {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<div class="media-container">
|
||||
<div class="audio-player">
|
||||
<audio onloadedmetadata="setup_audio_metadata(event)" ontimeupdate="setup_audio_metadata(event)">
|
||||
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
|
||||
</audio>
|
||||
<button onclick="toggle_play_audio(event)">Play</button>
|
||||
<input class="media-seek" type="range" onchange="update_audio_time(event)" value="0">
|
||||
<select onchange="update_audio_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>
|
||||
<div class="audio-preview">
|
||||
</div>
|
||||
<p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
|
||||
<button onclick="toggle_loop_audio(event)">Loop</button>
|
||||
<script>
|
||||
function setup_audio_metadata(event) {
|
||||
audio = event.target;
|
||||
var seek = audio.parentElement.children[2];
|
||||
seek.min = 0;
|
||||
seek.max = audio.duration;
|
||||
seek.value = audio.currentTime;
|
||||
audio.parentElement.children[5].children[0].innerHTML = "" + timeToText(audio.currentTime) + "/";
|
||||
audio.parentElement.children[5].children[1].innerHTML = "" + timeToText(audio.duration);
|
||||
}
|
||||
function toggle_loop_audio(event) {
|
||||
audio = event.target.parentElement.children[0];
|
||||
audio.loop = !audio.loop;
|
||||
}
|
||||
function update_audio_time(event) {
|
||||
audio = event.target.parentElement.children[0];
|
||||
audio.currentTime = event.target.value;
|
||||
}
|
||||
function toggle_play_audio(event) {
|
||||
el = event.target;
|
||||
audio = event.target.parentElement.children[0];
|
||||
speed = el.parentElement.children[3].value;
|
||||
audio.playbackRate = speed;
|
||||
|
||||
if (audio.paused) {
|
||||
audio.play();
|
||||
el.innerHTML = "Pause";
|
||||
}
|
||||
else {
|
||||
audio.pause();
|
||||
el.innerHTML = "Play"
|
||||
}
|
||||
}
|
||||
function update_audio_speed(event) {
|
||||
el = event.target;
|
||||
audio = event.target.parentElement.children[0];
|
||||
audio.playbackRate = el.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>
|
||||
.audio-player {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<audio controls preload="false">
|
||||
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
|
||||
</audio>
|
||||
</noscript>
|
||||
</div>
|
@ -1,2 +1,2 @@
|
||||
<iframe src='{{.Get 0 }}'>
|
||||
<iframe src='{{.Get "src" }}'>
|
||||
</iframe>
|
@ -0,0 +1,34 @@
|
||||
<style>
|
||||
body{
|
||||
background-color: black;
|
||||
}
|
||||
header,footer{
|
||||
display:none;
|
||||
}
|
||||
#main{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
width:100vw;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
max-width: initial;
|
||||
}
|
||||
</style>
|
||||
<video controls id="main" class="video-player">
|
||||
<source src="">
|
||||
</video>
|
||||
|
||||
<script>
|
||||
//https://davidwalsh.name/query-string-javascript
|
||||
function getUrlParameter(name) {
|
||||
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||||
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||||
var results = regex.exec(location.search);
|
||||
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||
};
|
||||
|
||||
var source = document.createElement('source')
|
||||
source.src = ''+getUrlParameter('v');
|
||||
document.getElementById('main').appendChild(source);
|
||||
</script>
|
@ -1,4 +1,137 @@
|
||||
<video {{if .Get "autoplay"}}autoplay muted loop preload="true"{{else}}controls preload="false"{{end}}>
|
||||
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
|
||||
<source src='{{.Site.BaseURL}}{{.Get 0}}'>
|
||||
</video>
|
||||
<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>
|
@ -0,0 +1,3 @@
|
||||
<a href="https://webring.yesterweb.org/noJS/index.php?d=prev&url=https://yesterweb.org/">Previous</a>
|
||||
<a href="https://webring.yesterweb.org/noJS/index.php?d=rand&url=https://yesterweb.org/">Random</a>
|
||||
<a href="https://webring.yesterweb.org/noJS/index.php?d=next&url=https://yesterweb.org/">Next</a>
|
Loading…
Reference in New Issue