Cara Membuat Pemutar Video Dengan JavaScript
Bisakah pemutar video atau audio di dalam browser Anda tanpa layanan dari pihak ketiga seperti Flash. Untuk melakukannya, Anda perlu memasang plugin dan hanya memutar media saat menggunakannya.
Saat ini, kami memiliki JavaScript dengan versi baru HTML5. Dengan teknologi dan alat baru ini, kami dapat melakukan streaming video dengan cepat dan mudah.
Untuk melakukannya, Anda hanya memerlukan tag <video> default dan memberikan tautan yang disimpan di komputer Anda. Kontrol atribut sederhana akan memberi Anda pemutar video default yang terpasang di browser.
Ini bersifat dasar dan tidak memiliki banyak fitur, jadi jika Anda ingin melakukan streaming video di situs Web Anda dengan cara yang lebih profesional menggunakan pemutar video, Anda harus menggunakan JavaScript. Dan saya akan memberikan tutorial dan cara melakukanya di artikel ini.
Cara dan tutorial membuat pemutar Video dengan JavaScript
Anda dapat membuat dengan ketiga script yang diperlukan untuk membuat pemutar video dengan JavaScript sebagai berikut.
mkdir video-player
cd video-player
touch index.html script.js style.cssUntuk menambahkan pemutar video standar ke aplikasi, Anda harus menambahkan kode berikut ke index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>How to build a video player in Javascript</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="player">
<video class="video" controls>
<source
src="<https://ftp.f1nalboss.de/data/imgly/videoplayer/testvideo.mp4>"
type="video/mp4"
/>
<source
src="<https://ftp.f1nalboss.de/data/imgly/videoplayer/testvideo.mp4>"
type="video/webm"
/>
<p>No HTML5 video supported</p>
</video>
</div>
<script src="script.js"></script>
</body>
</html>Dalam kode diatas, elemen <video> tersebut menggunakan video jarak jauh dari FTP saya. Anda dapat menggunakan video default atau menambahkan apapun dari komputer lokal Anda dengan menyesuaikan atributnya src.
Spesifikasi HTML5 mendukung tiga format video berbeda dan cuplikannya menggunakan beberapa <source> tag untuk membuat video dengan format MP4 dan WebM.
Selanjutnya, <p> tag digunakan untuk menampilkan konten yang telah ditentukan sebelumnya kepada agen pengguna yang tidak mendukung video elemen tersebut.
Tag HTML5 <video> berisi beberapa atribut asli. Misalnya control atribut menampilkan kontrol pemutar standar saat ditambahkan atau disetel ke true. Anda dapat mengetahuinya lebih lanjut tentang semua atribut video disini.
Sebelum Anda melanjutkan, Anda harus menerapkan atribut yang diperlukan tutorial ini dengan mengisi style.css semua atribut dari codePen ini. Simpan dan buka index.html di dalam browser untuk melihat pemutar video.
Membuat Pemutar Video dengan JavaScript
Untuk menyesuaikan pemutar video, pertama-tama Anda harus menghapus controls atribut yang menampilkan Play, Pause Volume dan lain-lain. Karena pada langkah ini, Anda akan membuat kontrol Anda sendiri.
Menambahkan Putar dan Jeda
Untuk mengaktifkan putar dan jeda video, Anda harus menambahkan tombol baru ke dalam index.html:
<div class="controls">
<button
class="controls__btn playPauseBtn"
title="Toggle Play"
>
►
</button>
</div>Setelah itu, buka script.js dan aktifkan fungsinya dengan menambahkan kode ini:
const videoContainer = document.querySelector(".video-container");
const playPauseBtn = document.querySelector(".playPauseBtn");
function togglePlay() {
if (videoContainer.paused || videoContainer.ended) {
videoContainer.play();
} else {
videoContainer.pause();
}
}
function updatePlayBtn() {
playPauseBtn.innerHTML = videoContainer.paused ? "►" : "❚❚";
}
playPauseBtn.addEventListener("click", togglePlay);
videoContainer.addEventListener("click", togglePlay);
videoContainer.addEventListener("play", updatePlayBtn);
videoContainer.addEventListener("pause", updatePlayBtn);Dalam kode JavaScript ini, pertama-tama, video-container elemen dan elemen playPauseBtn dipilih ( Baris 1 dan 2 ). Kemudian dua fungsi togglePlay( ) dan updatePlayBtn.
togglePlay( ) digunakan untuk menghentikan dan memulai video.
updatePlayBtn digunakan untuk beralih diantara ikon yang ditampilkan dalam pemutar video.
Menambahkan Bilah Kemajuan
Selanjutnya, menambahkan Bilah kemajuan untuk menunjukan stempel waktu video saat di putar. Pertama, tambahkan div tag kedalam index.html yang berfugsi sebagai bilah kemajuan.
<div class="controls">
<div class="progress">
<div class="progress__filled"></div>
</div>
// ..
</div>Kemudian buka script.js tambahkan kode berikut ini:
const progress = document.querySelector(".progress");
const progressBar = document.querySelector(".progress__filled");
function handleProgress() {
const progressPercentage = (videoContainer.currentTime / videoContainer.duration) * 100;
progressBar.style.flexBasis = `${progressPercentage}%`;
}
function jump(e) {
const position = (e.offsetX / progress.offsetWidth) * videoContainer.duration;
videoContainer.currentTime = position;
}
videoContainer.addEventListener("timeupdate", handleProgress);
progress.addEventListener("click", jump);
let mousedown = false;
progress.addEventListener("mousedown", () => (mousedown = true));
progress.addEventListener("mousemove", (e) => mousedown && jump(e));
progress.addEventListener("mouseup", () => (mousedown = false));Pada kode diatas, progress dan progress-filled elemen akan dipilih, dan dua fungsi akan ditambahkan yaitu, handleProgress ( ) dan jump (e).
HandleProgress ( ) berfungsi untuk memperbarui bilah kemajuan dan fungsi Jump (e) digunakan untuk mengaktifkan klik pada bilah kemajuan.
Post a Comment for "Cara Membuat Pemutar Video Dengan JavaScript"
Post a Comment