Pada artikel ini, kita akan belajar cara download video youtube dengan menggunakan jQuery. Disini kita akan mengimport library ke dalam project kita menggunakan cdn. Jadi, mari kita simak tutorial berikut ini untuk melihat bagaimana cara download video youtube di jquery.
Baca Juga
Pertama kita buat folder download_video_jquery dan di folder tersebut buat file dengan nama index.html. Buka file index.html di text editor kesukaan kalian. Kemudian kita tambahkan code berikut untuk membuat form yang berisi link video dan juga resolusi video yang akan diunduh.
<!DOCTYPE html> <html> <head> <title>Cara Download Video Youtube Menggunakan jQuery - Leravio</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script> </head> <body class="bg-light"> <div class="col-md-7 offset-md-3 mt-5"> <div class="card"> <div class="card-header bg-dark"> <h5 style="color:white">Cara Download Video Youtube Menggunakan jQuery - Leravio</h5> </div> <div class="card-body"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="text-weight"><b>Enter Video Link :</b></label> <input type="txt" name="link" class="form-control link" required> </div> </div> </div> <form class="form-download mt-3"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="text-weight"><b>Select Video Resolusi:</b></label> <select class="form-control formte" required> <option selected disabled>Select Video Resolusi</option> <option value="mp4a">144p Mp4</option> <option value="360">360p Mp4</option> <option value="480">480p Mp4</option> <option value="720">720p Mp4</option> <option value="1080">1080p Mp4</option> </select> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group mt-4 download-video"> <button class="btn btn-success btn-block click-btn-down" type="submit">Click Here</button> </div> </div> </div> </form> </div> </div> </div> </body> </html>
Pada code diatas, kita membuat option untuk resolusi video yang akan diunduh yang terdiri dari 144 Mp4, 360 Mp4, 480 Mp4, 720 Mp4, 1080 Mp4.
Setelah itu, kita tambahkan code berikut ini di atas tag </body>.
<script type="text/javascript"> $(".click-btn-down").click(function(){ var link = $(".link").val(); var formate = $(".formte").children("option:selected").val(); var src =""+link+"="+formate+""; downloadVideo(link,formate); }); function downloadVideo(link,formate) { $('.download-video').html('<iframe style="width:100%;height:60px;border:0;overflow:hidden;" scrolling="no" src="https://loader.to/api/button/?url='+link+'&f='+formate+'"></iframe>'); } </script>
Berikut penjelasan terkait code di atas:
- Pertama kita cari class .click-btn-down, jika ada trigger click maka masuk ke dalam function.
- Selanjutnya, kita ambil nilai link dan resolusi video.
- Terakhir, kita membuat function downloadVideo yang akan mengubah struktur html pada class .download-video
Selamat sekarang kita telah berhasil melakukan download video youtube dengan menggunakan jQuery. Jika ada pertanyaan, Anda bisa langsung tulis di kolom komentar di bawah ini.