From ba1a1eb712152daaf118df1bc208c86716411762 Mon Sep 17 00:00:00 2001 From: Feuerhamster Date: Sat, 3 Aug 2019 00:54:40 +0200 Subject: [PATCH] v1.0 --- api.php | 55 +++++++++++++++ docs.php | 59 ++++++++++++++++ downloader.html | 31 +++++++++ home.html | 9 +++ index.js | 107 ++++++++++++++++++++++++++++ index.php | 47 +++++++++++++ infos.html | 26 +++++++ style.css | 180 ++++++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 514 insertions(+) create mode 100644 api.php create mode 100644 docs.php create mode 100644 downloader.html create mode 100644 home.html create mode 100644 index.js create mode 100644 index.php create mode 100644 infos.html create mode 100644 style.css diff --git a/api.php b/api.php new file mode 100644 index 0000000..758e4ad --- /dev/null +++ b/api.php @@ -0,0 +1,55 @@ +args->player_response; + + $ytdata = json_decode($ytdata); + + if($ytdata->videoDetails->useCipher == false){ + + $data = new stdClass(); + + $data->title = $ytdata->videoDetails->title; + $data->channel = $ytdata->videoDetails->author; + $data->videoId = $ytdata->videoDetails->videoId; + $data->length = $ytdata->videoDetails->lengthSeconds; + $data->views = $ytdata->videoDetails->viewCount; + + $data->sources = $ytdata->streamingData; + $data->thumbnails = $ytdata->videoDetails->thumbnail->thumbnails; + + $send = json_encode($data); + + echo $send; + + }else{ + $data = new stdClass(); + $data->error = "cipher_video"; + $send = json_encode($data); + echo $send; + } + +}else{ + $data = new stdClass(); + $data->error = "missing_video_id"; + $send = json_encode($data); + echo $send; +} +?> diff --git a/docs.php b/docs.php new file mode 100644 index 0000000..e09934d --- /dev/null +++ b/docs.php @@ -0,0 +1,59 @@ +

API for Developers

+

You can get the data of a video very easily by using our API.

+ +

Web Request structure

+MethodGET +Urlhttps://feuerhamster.code-elite.net/web-youtube-downloader/api.php +Paramsvid={YOUTUBE VIDEO ID} +ReturnJSON + +

Return values

+

There are mulitple return values for that request. The return values are also in JSON format

+
Errors: + - error: missing_video_id //returns if you have not send the video Id in the query string + - error: cipher_video" //returns if the video is protected and can not be read by the api +
+ +
Video Data JSON structure: + +- title +- channel +- length +- views + +- sources: + + - expiresInSeconds + + - formats: + ARRAY() + + - adaptiveFormats: + ARRAY() + +- thumbnails: + ARRAY() +
+ + +

Examples

+

An example url for an api call

+
https://feuerhamster.code-elite.net/web-youtube-downloader/api.php?vid=nD6_aQIJgW0 +
+ +

An example with Ajax in JavaScript

+
var videoId = "nD6_aQIJgW0"; + +$.ajax({ + type: 'GET', + url: 'https://feuerhamster.code-elite.net/web-youtube-downloader/api.php', + data: 'vid=' + videoId, + success: function(res){ + + if(!res.error){ + console.log(res); + } + + } +}); +
\ No newline at end of file diff --git a/downloader.html b/downloader.html new file mode 100644 index 0000000..14b0e58 --- /dev/null +++ b/downloader.html @@ -0,0 +1,31 @@ +
+ + +
+

...

+

...

+

...

+

...

+ +
+ + +
+ +

Main Sources

+ +
+ +
+ +

Adaptive Sources

+ +
+ +
+ +

Thumbnails

+ +
+ +
\ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..d5c033f --- /dev/null +++ b/home.html @@ -0,0 +1,9 @@ +
+ +

Download Youtube Videos from Source!

+ +

All Video and Audio Tracks + Thumbnails

+ + + +
\ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..cc302de --- /dev/null +++ b/index.js @@ -0,0 +1,107 @@ +//get query string +var urlQs = document.URL.split('?'); + +//check if any querystring is set +if(urlQs[1]){ + + //parse querytring args + var qsArgs = urlQs[1].split('='); + + if(qsArgs[0] == "vid"){ + + $('#content').load('./downloader.html'); + getVideoData(qsArgs[1]); + + }else if(qsArgs[0] == "page"){ + if(qsArgs[1] == "infos"){ + $('#content').load('./infos.html'); + }else if(qsArgs[1] == "documentation"){ + $('#content').load('./docs.php'); + }else{ + $('#content').html('

ERROR 404: Page not found!

'); + } + } + +}else{ + $('#content').load('./home.html'); +} + + +function parseMimeType(mimeType){ + var regex = /(\w+)\/(\w+)\;\ codecs\=\"(.+)\"/; + var result = regex.exec(mimeType); + return { type: result[1], format: result[2], codec: result[3] }; +} + +function secToMin(time) { + var hr = ~~(time / 3600); + var min = ~~((time % 3600) / 60); + var sec = time % 60; + var sec_min = ""; + if (hr > 0) { + sec_min += "" + hrs + ":" + (min < 10 ? "0" : ""); + } + sec_min += "" + min + ":" + (sec < 10 ? "0" : ""); + sec_min += "" + sec; + return sec_min+ " minutes"; + } + +function getVideoData(videoId){ + + $.ajax({ + type: "GET", + url: "./api.php", + data: "vid=" + videoId, + success: function(res){ + + console.log(res); + + if(!res.error){ + + $('#video-title').html(res.title); + $('#video-channel').html(res.channel); + $('#video-views').html(res.views.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') + " views"); + $('#video-time').html(secToMin(res.length)); + $('#video-thumbnail').attr("src", res.thumbnails[3].url); + + $('#video-links').html('https://www.youtube.com/watch?v=' + res.videoId + ''); + + res.sources.formats.forEach(element => { + + var mainMime = parseMimeType(element.mimeType); + $('#video-main-source').append('

Quality: ' +element.qualityLabel+ '

Format: ' + mainMime.format + '

Codec: ' + mainMime.codec + '

Download
'); + + }); + + res.sources.adaptiveFormats.forEach(element => { + var mime = parseMimeType(element.mimeType); + if(mime.type == "video"){ + $('#video-sources').append('
Type' + mime.type + 'Quality' + element.qualityLabel + 'Format' + mime.format + 'Codec' + mime.codec + '
'); + }else{ + $('#video-sources').append('
Type' + mime.type + 'Bitrate' + element.bitrate + 'Format' + mime.format + 'Codec' + mime.codec + '
'); + } + }); + + res.thumbnails.forEach(element => { + $('#video-thumbnails').append('
Size' + element.width + 'px*' + element.height + 'px
Download
') + }); + + }else{ + $('#content').html('

An error has occurred!

Please try another video or try again later

'); + } + + + } + }); + +} + +function loadVideoURL(source){ + + //parse soruce and get id + var ytidRegex = /(youtu\.be\/|youtube\.com\/(watch\?(.*&)?v=|(embed|v)\/))([^\?&"'>]+)/; + var videoId = ytidRegex.exec(source)[5]; + + window.location.href = window.location.protocol + "//" + window.location.hostname + window.location.pathname + "?vid=" + videoId; + +} \ No newline at end of file diff --git a/index.php b/index.php new file mode 100644 index 0000000..3de6696 --- /dev/null +++ b/index.php @@ -0,0 +1,47 @@ + + + + + + + + + Web-Youtube-Downloader + + + + + + + + + + + + + +
+ +

Web-Youtube-Downloader

+ +
+ + + +
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/infos.html b/infos.html new file mode 100644 index 0000000..1d2c818 --- /dev/null +++ b/infos.html @@ -0,0 +1,26 @@ +

Disclaimer

+

This Website is not a part of youtube or google

+ +

Infos

+

+ Contact the owner:

+ Email: myhamstermail@gmail.com
+ GitHub: github.com/Feuerhamster
+ +

+ + Where do we have the data of the youtube videos?

+ We use the official data from the youtube.com website. All URLs and metadata come from the respective page of the corresponding Youtube video.

+ +

+ + Is the downloading of youtube videos lawful?

+ Everyone is allowed to download public Youtube videos for private use.

+ +

+ + Does this website violate laws and regulations such as once "convert2mp3"?

+ No. On "convert2mp3" the videos were converted on the servers of the provider and made available for download.
+ On our website, you download the videos directly from the sources on the google server. + +

\ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b8afc54 --- /dev/null +++ b/style.css @@ -0,0 +1,180 @@ +body, html{ + margin: 0px; + height: 100%; + width: 100%; + font-family: 'Muli', sans-serif; +} + +*{ + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6, p{ + color: rgb(50,50,50); +} + +@media (max-width:901px){ + .box-mobile{ + flex-direction: column!important; + align-items: center; + } + .box{ + flex-wrap: wrap; + } +} + +.pre{ + background-color: rgba(240,240,240); + border: 2px solid rgba(230,230,230); + border-radius: 2px; + padding: 10px; + font-family: 'Courier New', Courier, monospace; + color: rgb(50,50,50); + overflow-x: auto; + margin-top: 20px; + margin-bottom: 20px; + white-space: pre; +} + +#head-bar{ + display: flex; + align-items: flex-start; + background-color: #d63030; + padding: 5px; + box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3); + position: relative; +} + +#head-bar > h1{ + color: white; + margin: 0px; + font-family: 'Muli', sans-serif; + font-size: 28px; + padding: 2px; +} + +.spacer{ + flex-grow: 1; +} + +#head-bar > input{ + background-color: rgba(255,255,255,0.3); + border: 0; + padding: 8px; + margin: 2px; + font-size: 16px; + color: white; + font-family: 'Muli', sans-serif; + min-width: 300px; + border-radius: 2px; +} + +#head-bar > input:focus{ + box-shadow: 0px 0px 5px 1px rgba(70,70,70,0.2); +} + +#content{ + display: flex; + width: 100%; + min-height: calc(100% - 93px); + flex-direction: column; + background-color: rgb(250,250,250); + padding: 30px; +} + +#home-page{ + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + flex-direction: column; +} + +#home-page > input{ + background-color: #f04f4f; + border: 0; + padding: 10px; + margin: 5px; + font-size: 18px; + font-family: 'Muli', sans-serif; + min-width: 400px; + border-radius: 2px; + color: white; +} +#home-page > input:focus{ + box-shadow: 0px 0px 2px 1px rgba(180,180,180,1); +} + +footer{ + padding: 10px; + display: flex; + justify-content: center; + background-color: rgb(250,250,250); +} +footer > a{ + font-size: 18px; + margin-left: 10px; + margin-right: 10px; + color: rgb(100, 100, 100); +} + +footer > a:hover{ + color: rgb(70, 70, 70); +} + +.box{ + background-color: white; + padding: 10px; + box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.2); + display: flex; + margin: 10px 0px 10px 0px; + flex-direction: row; +} + +.label{ + display: inline-block; + margin: 5px; +} +.label > .label-name{ + background-color: rgb(120,120,120); + color: white; + padding: 2px 5px 2px 5px; + border-radius: 2px 0px 0px 2px; +} + +.label-value{ + color: white; + padding: 2px 5px 2px 5px; + border-radius: 0px 2px 2px 0px; +} +.label > .label-blue{ + background-color: #3498db; +} +.label > .label-red{ + background-color: #e74c3c; +} +.label > .label-green{ + background-color: #27ae60; +} +.label > .label-orange{ + background-color: #e49517; +} +.label > .label-purble{ + background-color: #8a52a0; +} + +.download-link-large{ + color: white; + font-size: 24px; + text-decoration: none; + background-color: #0984e3; + padding: 5px 10px 5px 10px; + border-radius: 2px; + box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.2); + margin-top: 10px; + display: inline-block; +} +.download-link-large:hover{ + background-color: #0569b6; +}