Membuat Play dan Pause Video Menggunakan Javascript

Membuat Play dan Pause Video Menggunakan Javascript

Pada kesempatan kali ini saya akan membahas tentang cara Membuat Play dan Pause Video Menggunakan Javascript. Dimana saya akan menampilkan video yang akan saya tampilkan dengan membuat tombol play dan pause menggunakan fungsi javascript.

Langkah pertaman untuk Membuat Play dan Pause Video Menggunakan Javascript yaitu teman-teman buat struktur html seperti berikut ini. Dan teman-teman berikan attribute onclick di setiap tombolnya untuk menjalankan fungsi yang akan dibuat menggunakan Javascript.

<!DOCTYPE html>

<html>

<head>

                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

                <title>Membuat Play dan Pause Video Menggunakan Javascript</title>

</head>

<body>

<div class="container text-center">

                <h1>Membuat Play dan Pause Video Menggunakan Javascript</h1>

                <video id="myVideo" class="w-50">

                  <source src="Info Education UseeTV - DUMET School.mp4" type="video/mp4">

                </video>

                <br>

                <button onclick="playVid()" type="button" class="btn btn-primary btn-sm">Play</button>

                <button onclick="pauseVid()" type="button" class="btn btn-secondary btn-sm">Pause</button>

</div>

</body>

</html>

Jika sudah maka langkah selanjutnya kita membuat dua buah fungsi yaitu fungsi play dan fungsi pause seperti pada script di bawah ini.

<script>

                var vid = document.getElementById("myVideo");

                // Play

                function playVid() {

                  vid.play();

                }

 

                function pauseVid() {

                  vid.pause();

                }

</script>

Dan jika teman-teman tampilkan dihalaman browser makan akan tampak seperti gambar di bawah ini. Jika teman-teman tekan tombol play maka video akan diputar dan jika menekan tombol pause video akan berhenti.

Membuat Play dan Pause Video Menggunakan Javascript

Demikian artikel tentang cara Membuat Play dan Pause Video Menggunakan Javascript. Semoga dapat bermanfaat dan selamat mencoba.

7 Juli 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat