2023-10-04 03:39:43 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > yt-dlp web ui< / title >
< link rel = "stylesheet" href = "/node_modules/turretcss/dist/turretcss.min.css" >
< link rel = "stylesheet" href = "/node_modules/video.js/dist/video-js.min.css" >
< link rel = "stylesheet" href = "/static/css/custom.css" >
< script src = "/node_modules/socket.io-client/dist/socket.io.min.js" > < / script >
< script src = "/node_modules/video.js/dist/video.min.js" > < / script >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta charset = "UTF-8" >
< / head >
< body >
< header >
< / header >
< main >
< br >
< input type = "hidden" id = "step" value = "1" >
< input type = "hidden" id = "languageCode" >
< input type = "hidden" id = "autoSub" value = "false" >
< img src = "/static/img/logo05background.png" >
< br >
Server limits (in seconds)
< table id = "limits" >
< thead >
< th > Maximum video length< / th >
< th > Maximum number of videos in playlist< / th >
< th > Maximum length of individual video in playlist< / th >
< th > Maximum gif length< / th >
< th > Maximum gif resolution< / th >
< / thead >
< tr >
< td id = "maxLength" > < / td >
< td id = "maxPlaylistLength" > < / td >
< td id = "maxLengthPlaylistVideo" > < / td >
< td id = "maxGifLength" > < / td >
< td id = "maxGifResolution" > < / td >
< / tr >
< / table >
< div >
< h6 > User Guides:< / h6 >
< p onclick = "toggle('#guides')" id = "guides_toggle" > ➕ < / p >
< ul id = "guides" style = "display: none;" >
< li >
Convert to MP3s:
< ul >
< li onclick = "toggle('#ctm_guide')" id = "ctm_guide_toggle" > ➕ < / li >
< li style = "display:none;" id = "ctm_guide" >
First make sure your video is under the maximum length for videos
< br >
Next choose Convert to MP3 from the method dropdown
< br >
Next, determine whether you want to add ID3 metadata to your file, this metadata makes it so that your chosen media player will show the correct title and other information.
< br >
Next, enter the video url in the Video/Playlist URL field
< br >
If you have determined you want to add ID3 data click the Show ID3 form button, fill out your desired field and click Submit
< br >
Otherwise click Process.
< br >
A spinning wheel will show up and when the conversion is done, or if there's an error you will see your results in the table at the bottom of the page. You can right click/hold and release the link to get the option to download your file.
< / li >
< / ul >
< / li >
< li >
Get all download links for video:
< ul >
< li onclick = "toggle('#dll_guide')" id = "dll_guide_toggle" > ➕ < / li >
< li style = "display:none;" id = "dll_guide" >
First choose Get all download links for video from the method dropdown
< br >
Second, enter the video url in the Video/Playlist URL field and click Process
< br >
A select will appear in the table at the bottom of the page, select your desired video and click Download selected. You will be sent to the link for the file, you can right click/hold and release on the media to get the option to download it
< / li >
< / ul >
< / li >
< li >
Download playlist as MP3s
< ul >
< li onclick = "toggle('#dlp_guide')" id = "dlp_guide_toggle" > ➕ < / li >
< li style = "display:none;" id = "dlp_guide" >
First make sure your playlist and all videos on the playlist fall within the limits defined for them.
< br >
Next, enter the playlist url in the Video/Playlist URL field and click Process
< br >
Your results will appear when done in the table at the bottom of the page
< / li >
< / ul >
< / li >
< li >
Download subtitles:
< ul >
< li onclick = "toggle('#dls_guide')" id = "dls_guide_toggle" > ➕ < / li >
< li style = "display:none;" id = "dls_guide" >
First enter the video url in the Video/Playlist URL and click Process
< br >
Next, choose the subtitle language you'd like to download in the details row of the results from the previous step in the table at the bottom of the page, choose whether or not to download auto subtitles, and click Get subtitles
< br >
Your results will appear when done in the table at the bottom of the page
< / li >
< / ul >
< / li >
< li >
Clip video:
< ul >
< li onclick = "toggle('#clip_guide')" id = "clip_guide_toggle" > ➕ < / li >
< li style = "display:none;" id = "clip_guide" >
First enter the video url in the Video/Playlist URL and click Process
< br >
Next, using the sliders select the beginning and end of your clip. Also choose whether to make the clip into a gif.
< br >
Once you're done click Clip.
< br >
Your results will appear when done in the table at the bottom of the page
< / li >
< / ul >
< / li >
< li >
Themes:
< ul >
< li onclick = "toggle('#themes_guide')" id = "themes_guide_toggle" > ➕ < / li >
< li style = "display:none;" id = "themes_guide" >
To configure your theme (page colors) click the ➕
< br >
To choose a theme click on the Theme select and pick any theme
< br >
To configure a custom theme choose Custom from the Theme select and choose the background and text colors
< br >
If you want a gradient background configure both Gradient color options
< / li >
< / ul >
< / li >
2023-10-04 13:59:02 +00:00
< li >
URL functionality:
< ul >
< li onclick = "toggle('#url_guide')" id = "url_guide_toggle" > ➕ < / li >
< li style = "display:none;" id = "url_guide" >
To use the URL functionality just add https://y232.live? (or the corresponding URL for this particular host) to the beginning of your Youtube URL, this will open this site and autofill the URL field
< / li >
< / ul >
< / li >
2023-10-04 03:39:43 +00:00
< / ul >
< / div >
< p > If you have any questions that are not addressed by the guide please check our gitlab to see if the question has been addressed: < a href = "https://gitlab.com/wizdevgirl1/yt-dlp-web-ui/-/issues" > https://gitlab.com/wizdevgirl1/yt-dlp-web-ui/-/issues< / a > < / p >
< h6 > Themes< / h6 >
< p onclick = "toggle('#themes')" id = "themes_toggle" > ➕ < / p >
< div id = "themes" style = "display: none;" >
< label class = "select" for = "theme" >
Theme
< select id = "theme" onchange = "setTheme()" >
< option value = "white" > White < / option >
< option value = "yellow" > Yellow< / option >
< option value = "purple" > Purple< / option >
< option value = "grayblue" > Gray blue< / option >
< option value = "sky" > Sky< / option >
< option value = "black" > Black< / option >
< option value = "custom" > Custom< / option >
< / select >
< / label >
Custom colors:
< br >
< p class = "field" >
< label for = "bgcolor" > Background color< / label >
< input type = "color" onchange = "setTheme()" id = "bgcolor" value = "#ffffff" / >
< / p >
< p class = "field" >
< label for = "textcolor" > Text color< / label >
< input type = "color" onchange = "setTheme()" id = "textcolor" value = "#000000" / >
< / p >
< p class = "field" >
< label for = "gradienttop" > Top color of gradient< / label >
< input type = "color" onchange = "setTheme(true)" id = "gradienttop" value = "none" / >
< / p >
< p class = "field" >
< label for = "gradientbottom" > Bottom color of gradient< / label >
< input type = "color" onchange = "setTheme(true)" id = "gradientbottom" value = "none" / >
< / p >
< / div >
< label class = "select" for = "method" >
Method
< select id = "method" >
< option value = "toMP3" > Convert to MP3< / option >
< option value = "streams" > Get all download links for video< / option >
< option value = "playlist" > Download playlist as MP3s< / option >
< option value = "subtitles" > Download subtitles< / option >
< option value = "clip" > Clip video< / option >
< / select >
< / label >
< br > < br >
< button onclick = "toggleID3Form()" id = "id3toggle" > Show ID3 form< / button >
< br >
< form id = "id3" style = "display:none;" >
< br >
< / form >
< br >
< label for = "url" > Video/Playlist URL< / label >
< input type = "url" id = "url" placeholder = "https://" / >
< br >
< div id = "urlWarning" style = "display:none;" >
< p style = "color: red;" > Not a valid URL< / p >
< / div >
< br > < br >
< button onclick = "process()" > Process< / button >
< br >
< div id = "clipper" style = "display:none;" >
< div id = "videoContainer" > < / div >
< br >
< select id = "srcSelect" onchange = "setSource(this.value)" >
< / select >
< br >
< input type = "text" style = "width: 10%; display: inline;" id = "timeStart" value = "00:00" > - < input style = "width: 10%; display: inline;" type = "text" id = "timeEnd" value = "00:00" >
< br > < input id = "timeA" type = "range" min = "0" max = "100" oninput = "updatePlayerTime(this)" / >
< br > < input id = "timeB" type = "range" min = "0" max = "100" oninput = "updatePlayerTime(this)" / >
< br > < input id = "toGif" type = "checkbox" name = "toGif" / >
< label for = "toGif" > Convert to gif?< / label >
< br > < button onclick = "clipSecond()" > Clip< / button >
< / div >
< br >
< div id = "spinners" > < br > < / div >
< br >
< div id = "clipperWarning" style = "display:hidden;" >
< p style = "color: red;" > Video is too long< / p >
< / div >
< div id = "clipperWarning2" style = "display: none;" >
< p style = "color: red;" > End marker is before start marker< / p >
< / div >
< div id = "clipperWarning3" style = "display: none;" >
< p style = "color: red;" > Range is too long for gif< / p >
< / div >
< div id = "clipperWarning4" style = "display: none;" >
< p style = "color: red;" > Source resolution is too high< / p >
< / div >
< br >
< p > Results: < / p >
< div class = "table-responsive" >
< table >
< thead >
< tr >
< th scope = "col" > Status< / th >
< th scope = "col" > Title< / th >
< th scope = "col" > Link< / th >
< th scope = "col" > Details< / th >
< / tr >
< / thead >
< tbody id = "results" >
< / tbody >
< / table >
< / div >
< / main >
< footer >
< / footer >
< script src = "/static/js/custom.js" > < / script >
< / body >
< / html >
