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
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,954
    Đã được thích:
    1,208
    Đ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

    Chỉnh sửa cuối: 7/5/20


Chủ để tương tự : Video auto
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 THML5 VIDEO not working mobi (lỗi không có ảnh bìa) 3/7/24
Ngôn ngữ lập trình CSS, HTML, HTML5 Tạo ảnh bìa thumbnail image cho video trong HTML5 như thế nào? 9/11/21
Ngôn ngữ lập trình CSS, HTML, HTML5 Xin kích thước tất cả các size của youtube video channel? 23/11/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Disable Auto Zoom in click focus Input in mobile phone html css 7/8/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Tắt tự động chạy slider Stop Autoplay Bootstrap Carousel slider như thế nào 7/8/18