Cara Play Video Menggunakan Mouse Hover
Di panduan kali ini kita akan belajar mengenai Cara Play Video Menggunakan Mouse Hover, Cara Play Video Menggunakan Mouse Hover kita akan menggunakan guna dari javascript, karenanya video tersebut akan di play di dikala kita mengarahkan cursor di video yang ingin kita play tanpa mesti mengklik tombol play di video tersebut.
Cara Play Video Menggunakan Mouse Hover betul-betul sering kita jumpai di di media-media social di dikala kini ini, jadi user tak perlu mengklik video yang ingin dilihat, Cara Play Video Menggunakan Mouse Hover yaitu :
- Langkah pertama-tama kita akan siapkan sebuah video yang akan kita play sejajar dengan folder project yang akan kita gunakan.
- Kemudian kita akan membangun sebuah file dengan nama html di pada 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=Source Code Aplikasi.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 dapat merubah video yang teman-teman inginkan di <source src=”nama_video.mp4″ type=”video/mp4″>
- Berikutnya kita akan membangun file css dengan nama css bagi 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%
}Apabila kita jalankan di browser dan sekiranya mousenya kita arahkan di video tersebut karenanya video tersebut akan di play secara otomatis
Oke teman-teman seperti itulah panduan kita kali ini mengenai Cara Play Video Menggunakan Mouse Hover.
Semoga bermanfaat.
Terima kasih.
Sumber https://kursuswebsite.org
