Membuat Play dan Pause Video Menggunakan Javascript

07/07/2019    Shelli Ripati    34     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More