Как воспроизводить видео при наведении курсора на div с помощью jQuery?

Опубликовано: 1 Декабря, 2021

Учитывая видео на веб-сайте, и задача состоит в том, чтобы воспроизвести его при наведении курсора на видео и остановить воспроизведение видео при удалении курсора из видео div с помощью событий jQuery.

Пример: предположим, что вы торопитесь и у вас нет времени просмотреть все видео статьи, тогда вы можете просто навести указатель мыши на видео, чтобы увидеть его содержимое, не открывая видео целиком. Этот метод очень эффективен и может использоваться для экономии данных и времени пользователя. Этот подход чаще всего используется на YouTube и других популярных веб-сайтах потокового видео, который позволяет воспроизводить видео при наведении курсора.

Подход: можно воспроизводить видео при наведении курсора, используя jQuery. Для этого у них должна быть функция mouseenter, которая позволит воспроизводить видео при наведении курсора мыши на видео. Точно так же можно приостановить видео, запустив функцию mouseleave jQuery.

Использование JQuery MouseEnter () Метод: Метод MouseEnter () представляет собой встроенный метод JQuery , который работает , когда указатель мыши перемещается по выбранному элементу.

Использование JQuery MouseLeave () Метод: Метод MouseLeave () представляет собой метод , встроенные в JQuery , который работает , когда указатель мыши листья выбранный элемент.

Реализация кода:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < meta charset = "utf-8" >
    < meta name = "viewport" content =
        "width=device-width" , initial-scale = 1 >
    < script src = " https://code.jquery.com/jquery-3.3.1.slim.min.js "
        integrity =
 "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin = "anonymous" >
    </ script >
 
    < script src = "jquery.hoverplay.js" ></ script >
 </ head >
 
< body >
    < div id = "video-wrapper" >
        < video id = "video" width = "320" height = "240"
            controls data-play = "hover" muted = "muted" >
            < source src =
 " https://media.geeksforgeeks.org/wp-content/uploads/20200107020629/sample_video.mp4 "
                type = "video/mp4" >
            Your browser does not
            support the video tag.
        </ video >
    </ div >
 
    < script >
 
        // Getting video element using jQuery
        var video = $("#video");
 
        // Check if video is ready to play
        $(video).on('canplay', function () {
            $(video).mouseenter(function () {
                $(this).get(0).play();
            }).mouseleave(function () {
                $(this).get(0).pause();
            })
        });
    </ script >
 </ body >
 
</ html > 

Выход:

Technical Scripter JQuery Picked HTML HTML-Misc

Как воспроизводить видео при наведении курсора на div с помощью jQuery?

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ