tesses50
/
tytd-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
tytd-web/videoPlayer.html

240 lines
8.6 KiB
HTML
Raw Permalink Normal View History

Upload New File
2021-12-19 16:50:25 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tesses YouTube Downloader</title>
<link rel="manifest" href="manifest.webmanifest" crossorigin="use-credentials">
<link rel="stylesheet" href="css/styles.css" crossorigin="use-credentials">
<link href="css/bootstrap.min.css" rel="stylesheet" crossorigin="use-credentials">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-danger navbar-dark">
<div class="container">
<a href="#" data-target="home" class="navbar-brand spalnk">Tesses YouTube Downloader</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="upload.html" class="nav-link">Upload</a>
</li>
<li class="nav-item">
<a href="legacy.html" class="nav-link">Legacy Mode</a>
</li>
<li class="nav-item">
<a href="extensions.html" class="nav-link">Extensions</a>
</li>
editing
2022-01-03 21:09:07 +00:00
<li class="nav-item">
<a href="my_videos.html" class="nav-link">My Videos</a>
</li>
Upload New File
2021-12-19 16:50:25 +00:00
</ul>
</div>
</div>
</nav>
<main>
<section class="bg-danger text-light p-3">
<div class="container">
<div>
<div>
<h3>
Download YouTube Videos, Playlists or Channels
</h3>
</div>
</div>
</div>
</section>
<section class="bg-light text-dark p-3">
<!-- <div class="dropdown-menu">
<a class="dropdown-item" href="#">Server Download (SD)</a>
<a class="dropdown-item" href="#">Server Download (HD)</a>
<a class="dropdown-item" href="#">Server Download (Audio Only)</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Download To Device (SD)</a>
<a class="dropdown-item" href="#">Download To Device (HD)</a>
<a class="dropdown-item" href="#">Download To Device (Audio Only)</a>
</div>-->
<div class="input-group">
<input type="text" id="download_text_box" class="form-control" placeholder="https://www.youtube.com/watch?v=il9nqWw9W3Y" aria-label="Text input with segmented dropdown button">
<select class="form-control custom-select" id="selector" style="max-width: 6em;">
<option selected value=0>YouTube</option>
<!--<option value=1>Playlist</option>
<option value=2>Channel</option>
<option value=3>User</option>-->
<option value=4>Download</option>
<option value=5>Play</option>
</select>
<select class="form-control custom-select" id="res_selector" style="max-width: 5em;">
<option selected value=1>SD</option>
<option value=0>HD</option>
<option value=2>Audio</option>
</select>
<div class="input-group-append">
<button id="download_button" type="button" class="btn btn-primary">Download</button>
</div>
</div>
</section>
<!--Home Page-->
<section class="bg-light text-dark p-3">
<div class="container" style="text-align: center;">
<video controls id="my_player1" style="max-height: 45%;max-width: 90%;" loop >
</video>
</div>
</section>
<section class="bg-danger text-light p-3" style="height: 100%;">
<div class="container">
<a id="video_link" style="text-decoration: none" class="text-info" href="/"> <h1 id="video_name"></h1></h1></a>
<a id="author_link" style="text-decoration: none" class="text-info" href="/"><h2 id="author_name"></h2></a>
<hr>
<h4 ><a style="text-decoration: none" class="text-info" id="download_link" href="/">Download</a></h4>
<hr>
<h3 id="date">00/00/0000</h3>
<h3 id="views">42 views - 0 likes - 0 dislikes</h3>
<hr>
Keywords: <span id="keywords"></span>
<hr>
<p id="description">
</p>
</div>
</section>
</div>
</main>
<!-- <script src="js/jquery.js"></script>
<script src="js/lazyload.js"></script>
<script src="js/spa.js"></script>
<script src="js/new_main.js"></script>-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
const my_date = document.getElementById('date');
const video_url = document.getElementById('video_link');
const myTitle = document.getElementById('video_name');
const channel_name = document.getElementById('author_name');
const channel_url = document.getElementById('author_link');
const myViews = document.getElementById('views');
const myKeywords = document.getElementById('keywords');
const myDescription = document.getElementById('description');
const download_link = document.getElementById('download_link');
function progress2page(id)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myData = JSON.parse(this.responseText);
//var progressStr=myData.Progress.toString() + '%';
//var progressData = myData.Progress;
//var fileLength = formatBytes(myData.Length);
var title = myData.Title;
var uploadDate = new Date(myData.UploadDate);
var atitle = myData.AuthorTitle;
var acid = myData.AuthorChannelId;
var desc = myData.Description;
//var dur = sec2time(myData.Saved.Duration);
var views = myData.Views;
var likes = myData.Likes;
var dislikes = myData.Dislikes;
download_link.setAttribute('download',title + '-' + id + '.mp4');
//myProgress.setAttribute("value", progressData.toString());
//myProgressVal.textContent = progressStr;
myDescription.textContent = desc;
myTitle.textContent = title;
channel_name.textContent = atitle;
myViews.textContent = views.toString() + " view(s) - " + likes.toString() + " like(s) - " + dislikes.toString() + " dislikes";
channel_url.href = "https://www.youtube.com/channel/" + acid;
video_url.href = "https://www.youtube.com/watch?v=" + id;
my_date.textContent = (uploadDate.getMonth() + 1).toString() + '/' + uploadDate.getDate().toString() + '/' + uploadDate.getFullYear().toString();
let kw = "";
myData.Keywords.forEach((item, index) => {
if(index == 0)
{
kw = item;
}else{
kw += ", " + item;
}
});
keywords.textContent = kw;
}
//if(!(fileLength === undefined || dur ))
{
//size_len.textContent = fileLength + " - " + dur;
}
};
xmlhttp.open("GET", "api/Storage/File/Info/" + id + ".json", true);
xmlhttp.send();
}
function play_video()
{
console.log(window.location.hash);
var vals= window.location.hash.replace('#','').split('=');
const player=document.getElementById('my_player1');
download_link.setAttribute('href','api/Storage/File/' + vals[0] + '/' + vals[1] + ".mp4");
player.setAttribute('src','api/Storage/File/' + vals[0] + '/' + vals[1] + ".mp4");
// /246x138/
player.setAttribute('poster','api/Storage/File/Thumbnails/246x138/' + vals[1] + ".jpg");
progress2page(vals[1]);
}
play_video();
</script>
<script src="js/download_video.js"></script>
</body>
</html>