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

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi admin, 12/4/20.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,282
    Đã được thích:
    1,039
    Điểm thành tích:
    113
    Giới tính:
    Nam
    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>
    
     
    Cảm ơn đã xem bài:

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

    danh sách diễn đàn rao vặt gov chất lượng
    Chỉnh sửa cuối: 7/5/20


Like và Share ủng hộ ITSEOVN