Estoy creando un descargador de videos de youtube con express, html, javascript y luego quiero cambiar a vue.js.
Este es mi código:
índice.html
<!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>Document</title> </head> <body> <h1>My Own Youtube downloader</h1> <input class="URL-input" type="text" placeholder="enter..."> <button class="convert-button">Convert</button> <script src="script.js"></script> </body> </html>Guión.js
var convertBtn = document.querySelector(".convert-button"); var URLinput = document.querySelector(".URL-input"); convertBtn.addEventListener("click", function () { console.log("URL : ${URLinput.value}"); sendURL(URLinput.value); }); function sendURL(URL) { window.location.href = `http://localhost:4000/download?URL=${URL}`; }Servidor.js
const express = require("express"); const cors = require("cors"); const ytdl = require("ytdl-core"); const app = express(); app.use(cors()); app.listen(4000, () => { console.log("Server is working at port 4000 !!"); }); app.get("/download", (req, res) => { var URL = req.query.URL; res.header("Content-Disposition", 'attachment; filename="video.mp4'); ytdl(URL, { format: "mp4", }).pipe(res); });Ahora mismo, todo funciona bien. Solo quiero implementar la funcionalidad para que pueda ver el video de YouTube en la interfaz en el html.
¿Alguien sabe cómo implementar esta funcionalidad?
PD: prefiero no usar una base de datos, solo node y express por ahora
en el uso de server.js
app.get("/download/:URL", (req, res) => { var URL = req.params.URL; res.header("Content-Disposition", 'attachment; filename="video.mp4'); ytdl(URL, { format: "mp4", }).pipe(res); });y el archivo principal, use
document.getElementById('video').src=`localhost:8080/download/${URL}`;Y en el archivo html agregar
<video id="video" width="320" height="240" controls> </video>