Блог

У меня есть слайдер видео на странице, и я пытаюсь добавить функциональную кнопку воспроизведения поверх активного видео. Я следовал руководству здесь: https://codeconvey.com/add-html5-video-overlay-play-button / Кнопка работает с приостановкой / воспроизведением видео; однако она не изменяет текст с «воспроизведение» на «пауза» при нажатии. Я также пытаюсь либо изменить непрозрачность, либо скрыть кнопку, чтобы кнопка не закрывала видео во время воспроизведения. Я создал JSFiddle с соответствующим кодом (но по какой-то причине кнопка вообще не отображается в скрипке): https://jsfiddle.net/xasw7dqL Я получаю сообщение об ошибке «$ is not defined» в консоли, поэтому я уверен, что это как-то связано с этим, но я в недоумении, чточто нужно сделать, чтобы определить это. Я действительно не реализовывал JavaScript на сайте раньше. Заранее спасибо за любую помощь. Код ниже:
HTML:

         <div class="image-slider-fade fade">
          <button class="_active">Play</button>
          <video id="vid1" controls>
            <source src="videos/testvid1.mp4" type="video/mp4">
            Your browser does not support the video.
          </video>
        </div>
 

CSS:

 #vid1, #vid2, #vid3, #vid4 {
    width: 100%;
    z-index: -1;
}

button {
    background-color: #666;
    border: medium none;
    color: #fff;
    display: block;
    font-size: 18px;
    left: 0;
    margin: 0 auto;
    padding: 8px 16px;
    position: absolute;
    right: 0;
    top: 50%;
}

button._active {
    opacity: 0.5;
}

button:hover {
    background-color: #e05a00;
}
 

JavaScript:

 //video play button

$(document).ready(function() {
    var ctrlVideo = document.getElementById("video");
    ('button').click(function() {
        if ($('button').hasClass("_active")) {
            ctrlVideo.play();
            $('button').html("Pause");
            $('button').toggleClass("_active");
        } else {
            ctrlVideo.pause();
            $('button').html("Play");
            $('button').toggleClass("_active");
        }
    });
});
 

Нужно исправить 3 вещи:

1. вы написали, var ctrlVideo = document.getElementById("video"); но используете html <video id="vid1" controls> . Измените свой js на: var ctrlVideo = document.getElementById("vid1");
2. установите z-индекс вашей кнопки, потому что теперь ваша кнопка находится за проигрывателем, и вы не можете ее нажать (если вы удалите элементы управления в html, вы заметите, что щелчок вообще не срабатывает):

     button {
    background-color: #666;
    border: medium none;
    color: #fff;
    display: block;
    font-size: 18px;
    left: 0;
    margin: 0 auto;
    padding: 8px 16px;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 123;
    

   }

3. строка 5: добавьте $ в начале $('button')

Кроме того, чтобы заставить jquery работать с jsfiddle, добавьте его в окно с вашим js-кодом (в выпадающем списке)