TODO
- Add seekbar
- Add tooltip to seekbar
index.html
· 1.4 KiB · HTML
Raw
<video src="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"></video>
<p>Current Time: <span id="text-live">--:--</span></p>
<p>Duration: <span id="text-full">--:--</span></p>
<script>
// Set variable for video tag
const VideoElement = document.querySelector('video')
// Convert the video duration to a readable format
Number.prototype.VideoReadableFormat = function () {
let seconds = Math.floor(this), hours = Math.floor(seconds / 3600)
seconds -= hours*3600
let minutes = Math.floor(seconds / 60)
seconds -= minutes*60
if (hours < 10) {hours = "0"+hours}
if (minutes < 10) {minutes = "0"+minutes}
if (seconds < 10) {seconds = "0"+seconds}
if (hours === '00') {
// Hide 'hour' if the video not over an hour long
return minutes+':'+seconds
} else {
return hours+':'+minutes+':'+seconds
}
}
// When the video is playing, automatically update the 'Current Time' text
VideoElement.addEventListener('timeupdate', Live)
function Live() {document.getElementById('text-live').innerText = `${VideoElement.currentTime.VideoReadableFormat()}`}
// Post the video's full duration
VideoElement.onloadedmetadata = function() {document.getElementById('text-full').innerText = `${VideoElement.duration.VideoReadableFormat()}`}
</script>
| 1 | <video src="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"></video> |
| 2 | <p>Current Time: <span id="text-live">--:--</span></p> |
| 3 | <p>Duration: <span id="text-full">--:--</span></p> |
| 4 | <script> |
| 5 | // Set variable for video tag |
| 6 | const VideoElement = document.querySelector('video') |
| 7 | // Convert the video duration to a readable format |
| 8 | Number.prototype.VideoReadableFormat = function () { |
| 9 | let seconds = Math.floor(this), hours = Math.floor(seconds / 3600) |
| 10 | seconds -= hours*3600 |
| 11 | let minutes = Math.floor(seconds / 60) |
| 12 | seconds -= minutes*60 |
| 13 | if (hours < 10) {hours = "0"+hours} |
| 14 | if (minutes < 10) {minutes = "0"+minutes} |
| 15 | if (seconds < 10) {seconds = "0"+seconds} |
| 16 | if (hours === '00') { |
| 17 | // Hide 'hour' if the video not over an hour long |
| 18 | return minutes+':'+seconds |
| 19 | } else { |
| 20 | return hours+':'+minutes+':'+seconds |
| 21 | } |
| 22 | } |
| 23 | // When the video is playing, automatically update the 'Current Time' text |
| 24 | VideoElement.addEventListener('timeupdate', Live) |
| 25 | function Live() {document.getElementById('text-live').innerText = `${VideoElement.currentTime.VideoReadableFormat()}`} |
| 26 | // Post the video's full duration |
| 27 | VideoElement.onloadedmetadata = function() {document.getElementById('text-full').innerText = `${VideoElement.duration.VideoReadableFormat()}`} |
| 28 | </script> |