Video auto play/off/pause on hover mouse HTML 5

Hôm nay ITSEOVN sẽ hướng đẫn các bạn cách để Video tự động play/pause on hover khi chuột di chuyển chuột tới ở vị trị this chỉ định hoặc bất kỳ vị trí nào mình cần, Video auto play/off/pause on hover mouse HTML 5.

Demo:

1. Chèn dạng this tại Video index class index this.

Ví dụ ta có HTML5 Video như sau:

HTML:

<div class="csvideo">
   <video id="csvideoitem" preload="yes" loop>
      <source src="/video/video-bm.mp4" type="video/mp4">
      <source src="/video/video-bm.ogg" type="video/ogg">
      Lỗi: Trình duyệt không hỗ trợ video này
   </video>
</div>

• Muốn mỗi lần rê chuột vào class: csvideo thì video này phát, di chuyển chuột ra ngoài thì video này tự tắt pause lại.

Chèn code javascript sau:

Mã:

<script>
$(document).ready(function() {
     var movehover = $(".csvideo").hover( hoverVideo, hideVideo );
     function hoverVideo(e) {
          $('video', this).get(0).play();
     }
     function hideVideo(e) {
         $('video', this).get(0).pause();
     }
});
</script>

Nếu bị lỗi Uncaught TypeError: $ is not a function Chèn code javascript sau:

Mã:

<script>
jQuery(document).ready(function($){
        var movehover = $(".csvideo").hover( hoverVideo, hideVideo );
        function hoverVideo(e) {
            $('video', this).get(0).play();
        }
        function hideVideo(e) {
            $('video', this).get(0).pause();
        }
        var body = $('body');
    });
</script>

2. phát di chuyển chuột vào vị trí bất kỳ do mình chọn video đều phát và tự tắt được.

Ví dụ ta có HTML5 Video như sau:

HTML:

<div class="csvideoactive">
    .....Code gì đó của bạn
</div>
<div class="csvideo">
   <video id="csvideoitem" preload="yes" loop>
      <source src="/video/video-bm.mp4" type="video/mp4">
      <source src="/video/video-bm.ogg" type="video/ogg">
      Lỗi: Trình duyệt không hỗ trợ video này
   </video>
</div>

• Muốn mỗi lần rê chuột vào class: csvideoactive hoặc csvideo thì video này phát, di chuyển chuột ra ngoài 2 class thì video này tự tắt pause lại.

Chèn code javascript sau:

Mã:

<script>
$(document).ready(function() {
     var movehover = $(".csvideo").hover( hoverVideo, hideVideo );
    var movehover2 = $(".csvideoactive").hover( hoverVideo, hideVideo );
     function hoverVideo(e) {
          $("#csvideoitem")[0].play();
     }
     function hideVideo(e) {
        $("#csvideoitem")[0].pause();
     }
});
</script>

Nếu bị lỗi Uncaught TypeError: $ is not a function Chèn code javascript sau:

Mã:

<script>
jQuery(document).ready(function($){
       var movehover = $(".csvideo").hover( hoverVideo, hideVideo );
       var movehover2 = $(".csvideoactive").hover( hoverVideo, hideVideo );
        function hoverVideo(e) {
             $("#csvideoitem")[0].play();
        }
        function hideVideo(e) {
           $("#csvideoitem")[0].pause();
        }
        var body = $('body');
    });
</script>