Pada tutorial kali ini kita akan belajar tentang Cara Play Video Menggunakan Mouse Hover, Cara Play Video Menggunakan Mouse Hover kita akan menggunakan fungsi dari javascript, maka video tersebut akan di play pada saat kita mengarahkan cursor pada video yang ingin kita play tanpa harus mengklik tombol play pada video tersebut.
Cara Play Video Menggunakan Mouse Hover sangat sering kita jumpai pada pada media-media social pada saat sekarang ini, jadi user tidak perlu mengklik video yang ingin dilihat, Cara Play Video Menggunakan Mouse Hover yaitu :
- Langkah pertama kita akan siapkan sebuah video yang akan kita play sejajar dengan folder project yang akan kita gunakan.
- Kemudian kita akan membuat sebuah file dengan nama html di dalam file tersebut terdapat script html dan javascript seperti dibawah ini :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Cara Play Video Menggunakan Mouse Hover</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="videos">
<div class="video">
<video class="thevideo" loop preload="none">
<source src="DUMET School.mp4" type="video/mp4">
</video>
</div>
</div><br> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><br> <script>
var figure = $(".video").hover( hoverVideo, hideVideo );<br>function hoverVideo(e) { <br>$('video', this).get(0).play(); <br>}<br> function hideVideo(e) {<br>$('video', this).get(0).pause(); <br>}<br></script><br></body>
</html>
Teman-teman bisa merubah video yang teman-teman inginkan pada <source src=”nama_video.mp4″ type=”video/mp4″>
- Selanjutnya kita akan membuat file css dengan nama css untuk scriptnya seperti dibawah ini :
#videos {
max-width: 600px;
overflow: hidden;
}
.video {
background-image: url('https://karandaaz.com.pk/wp-content/uploads/2016/12/Play.png');
background-size: 50% 90%;
background-repeat: no-repeat;
margin-left: 50px
}
.thevideo{
width: 100%
}
Jika kita jalankan pada browser dan jika mousenya kita arahkan pada video tersebut maka video tersebut akan di play secara otomatis
Oke teman-teman itulah tutorial kita kali ini tentang Cara Play Video Menggunakan Mouse Hover.
Semoga bermanfaat.
Terima kasih.
The post Cara Play Video Menggunakan Mouse Hover appeared first on Kursus Website Terbaik.