HTML5 воспроизведение видео паузы на изображение или видео клик

Question

На моей странице есть HTML5-видео без элементов управления. Я использую изображение поверх видео (значок воспроизведения). Я хочу, чтобы видео могло воспроизводиться / приостанавливаться при клике по видео или по значку изображения.

Это скрипт, который я пытался использовать, но он не работает:

Если я нажму на видео, оно будет работать нормально, а если я нажму на изображение, то ничего не произойдет.

$(document).on('click', 'video', '#btnplay', function (e) {
        var video = $(this).get(0);
        if (video.paused === false) {
            video.pause();
            } else {
            video.play();
        }
        return false;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="video-container">
  <video autoplay="autoplay" loop="loop" width="100%" height="auto" class="videohome"> Your browser does not support the video tag. <source src="images/video/video.mp4" type="video/mp4" /></video>
  <img id="btnplay" class="playbtn" src="images/play.png" alt="Play">
</div>

Есть предложения? Заранее спасибо.

Answer 1

$(document).on('click', 'video, #btnplay', function (e) {
        var video = $('video').get(0);  // This line has been updated.
        if (video.paused === false) {
            video.pause();
            } else {
            video.play();
        }
        return false;
    });

Объяснение: Необходимо внести два изменения, два селектора в одну кавычку, и хотя мы щелкаем по любому из них, получаем для ссылки элемент 'video', поэтому вместо $ (this) .get (0) Я изменил его на $ ('video'). get (0), поэтому либо мы нажимаем на значок, либо нажимаем на сам видео-тег, он всегда относится только к видео-тегу.