Youtube Video information
Gebe eine Video-URL ein und frage alle Informationen zu dem Video ab.
Als Antwort wird eine JSON Objekt geliefert, was hier mit einen Syntax Highlighter lesbarer gemacht wurde.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<html>
<head>
<title>YouTube Video Downloader</title>
<style>
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>
</head>
<body>
<h1>YouTube Video Downloader</h1>
<form>
<input type="text" id="video-url" placeholder="Enter YouTube video URL" value="https://www.youtube.com/watch?v=ZH2Uiz4yfFY">
<button type="button" id="download-button">Download Video Infos</button>
</form>
<script>
const downloadButton = document.querySelector('#download-button');
downloadButton.addEventListener('click', async function() {
const videoUrl = document.querySelector('#video-url').value;
const videoId = getVideoId(videoUrl);
const apiKey = 'AIzaSyAIlO1RRIcufL9mNE8txs0ZC3kXrOPqVMs';
const apiUrl = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=${apiKey}&part=snippet,contentDetails,statistics,status`;
try {
const response = await fetch(apiUrl);
const data = await response.json();
//document.write("<pre>"+JSON.stringify(data,undefined, 2) +"</pre> ");
function output(inp) {
document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}
function syntaxHighlight(json) {
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
var obj = data;
var str = JSON.stringify(obj, undefined, 4);
//output(str);
output(syntaxHighlight(str));
const downloadUrl = `https://www.youtube.com/watch?v=${videoId}`;
} catch (error) {
console.error(error);
}
});
function getVideoId(videoUrl) {
const regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
const match = videoUrl.match(regex);
return match && match[2];
}
</script>
</body>
</html>