HTML5-video: Uncaught TypeError: Невозможно прочитать свойство 'play' из неопределенного

Question

У меня есть простая боковая панель, в которой у меня есть список видео. Теперь я хочу добавить пользовательскую кнопку воспроизведения, чтобы пользователь мог воспроизводить видео по своему выбору. Похоже на это.

Вот HTML-код:

<div class="sidebar navbar-nav" id="canvas" tabindex="1" style="overflow: hidden; outline: none;">

    <div id="51" class="sidebar_movie-block ui-draggable" style="position: relative;">
        <h1 class="title" for="video_51">Ecommerce</h1><span class="block-edit fa fa-edit" for="video_51"></span>
        <div class="playpause" for="video_51"></div>
        <video id="video_51" movieid="51" class="video-list video" src="videos/mena.mp4" duration="14.984" frames="375"></video>
    </div>

    <div id="10" class="sidebar_movie-block ui-draggable" style="position: relative;">
        <h1 class="title" for="video_10">Travel</h1><span class="block-edit fa fa-edit" for="video_10"></span>
        <div class="playpause" for="video_10"></div>
        <video id="video_10" movieid="10" class="video-list video" src="videos/whats_your.mp4" duration="3.344" frames="84"></video>
    </div>

    <div id="12" class="sidebar_movie-block ui-draggable" style="position: relative;">
        <h1 class="title" for="video_12">CRM</h1><span class="block-edit fa fa-edit" for="video_12"></span>
        <div class="playpause" for="video_12"></div>
        <video id="video_12" movieid="12" class="video-list video" src="videos/and_in.mp4" duration="5.104" frames="128"></video>
    </div>

</div>

Вот код js для воспроизведения видео:

var myVideo = $(".sidebar_movie-block").find("video").attr('id');
            console.log(myVideo);
            // $("#" + myVideo).play();
            $(".playpause").on('click', function(){
                  $(myVideo).get[0].play();            
            })

К сожалению, я получаю следующую ошибку!

Uncaught TypeError: Невозможно прочитать свойство 'play' из неопределенного

Что не так с моим кодом?

Answer 1

Если все, что вы пытаетесь сделать, это воспроизводить видео при нажатии кнопки рядом с ним, тогда все, что вам нужно сделать, это получить ссылку на элемент видео, получив родительский элемент div и найдя элемент video. Попробуйте это:

$(".playpause").on('click', function(){
   $(this).closest('.sidebar_movie-block').find('video').get(0).play();            
});