mirror of
https://github.com/TheCaduceus/FileStreamBot.git
synced 2026-01-16 00:43:26 -03:00
ae40ae9af6
Using download link instead of current window's URL make it possible to start playing the current media in external player.
155 lines
4.3 KiB
HTML
155 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Play Files</title>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-Frame-Options" content="deny">
|
|
|
|
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
|
|
|
<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
|
|
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
#stream-media {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
#error-message {
|
|
color: red;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.plyr__video-wrapper .plyr-download-button{
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
color: white;
|
|
z-index: 10;
|
|
}
|
|
|
|
.plyr__volume {
|
|
max-width: initial;
|
|
min-width: initial;
|
|
width: auto;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.plyr__video-wrapper .plyr-share-button{
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 10px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
color: white;
|
|
z-index: 10;
|
|
}
|
|
|
|
.plyr__video-wrapper .plyr-download-button:hover,
|
|
.plyr__video-wrapper .plyr-share-button:hover{
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
color: black;
|
|
}
|
|
|
|
.plyr__video-wrapper .plyr-download-button:before {
|
|
font-family: "Font Awesome 5 Free";
|
|
content: "\f019";
|
|
font-weight: bold;
|
|
}
|
|
|
|
.plyr__video-wrapper .plyr-share-button:before {
|
|
font-family: "Font Awesome 5 Free";
|
|
content: "\f064";
|
|
font-weight: bold;
|
|
}
|
|
|
|
.plyr, .plyr__video-wrapper, .plyr__video-embed iframe {
|
|
height: 100%;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<video id="stream-media" controls preload="auto">
|
|
<source src="" type="">
|
|
<p class="vjs-no-js">
|
|
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
|
|
</p>
|
|
</video>
|
|
|
|
<div id="error-message"></div>
|
|
|
|
<script>
|
|
var player = new Plyr('#stream-media', {
|
|
controls:['play-large', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'mute', 'settings', 'pip', 'fullscreen'],
|
|
settings:['speed','loop'],
|
|
speed:{selected:1,options:[0.25,0.5,0.75,1,1.25,1.5,1.75,2]},
|
|
seek: 10,
|
|
keyboard: { focused: true, global: true },
|
|
});
|
|
|
|
var mediaLink = "{{ mediaLink }}";
|
|
|
|
if (mediaLink) {
|
|
document.querySelector('#stream-media source').setAttribute('src', mediaLink);
|
|
player.restart();
|
|
|
|
var downloadButton = document.createElement('div');
|
|
downloadButton.className = 'plyr-download-button';
|
|
|
|
downloadButton.onclick = function() {
|
|
event.stopPropagation();
|
|
var link = document.createElement('a');
|
|
link.href = mediaLink;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
};
|
|
|
|
player.elements.container.querySelector('.plyr__video-wrapper').appendChild(downloadButton);
|
|
|
|
var shareButton = document.createElement('div');
|
|
shareButton.className = 'plyr-share-button';
|
|
|
|
shareButton.onclick = function() {
|
|
event.stopPropagation();
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: "Play",
|
|
url: mediaLink
|
|
});
|
|
}
|
|
};
|
|
|
|
player.elements.container.querySelector('.plyr__video-wrapper').appendChild(shareButton);
|
|
|
|
} else {
|
|
document.getElementById('error-message').textContent = 'Error: Media URL not provided';
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|