首页 > 解决方案 > HTML5 视频:未捕获的类型错误:无法读取未定义的属性“播放”

问题描述

我有一个简单的侧边栏,其中有一个视频列表。现在我想添加自定义播放按钮,以便用户可以播放他选择的视频。它看起来像这样。

在此处输入图像描述

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

不幸的是,我收到以下错误!

未捕获的类型错误:无法读取未定义的属性“播放”

我的代码有什么问题?

标签: javascriptjqueryhtmlhtml5-video

解决方案


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

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

推荐阅读