HTML5-视频：未被捕获的TypeError：无法读取未定义的属性“播放”

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();            
            })

不幸的是，我收到以下错误！

  

未捕获的TypeError：无法读取未定义的属性“ play”

我的代码怎么了？

Answer 1

如果您要尝试做的只是在单击视频旁边的按钮时播放视频，那么您要做的就是通过获取父div并找到视频元素来获取对video元素的引用。试试这个：

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