javascript - jQuery 视频叠加按钮

Question

我尝试为我的 HTML 5 视频创建覆盖播放按钮。我在Jfiddle - click here上创建了一个示例-这很好用。我试图将我的 fiddle 集成到我的网站上，但是我收到错误消息无法读取未定义的属性“暂停”。相信这与我的代码结构有关。下面是我的代码设置方式的片段。

 $('.video').click(function () {
if($(this).children(".video").get(0).paused){
  $(this).children(".video").get(0).play();
  $(this).children(".playpause").fadeOut();
}else{
   $(this).children(".video").get(0).pause();
  $(this).children(".playpause").fadeIn();
}

});

HTML

    <div class="col-md-12 video">
            <video muted loop controls poster="/assets/casestudies/marketingandcomms/ukcoffeeweek/coffee-video-poster.gif">
                    <source src="/assets/videos/coffee-video.mp4" type="video/mp4">
            </video>
            <div class="playpause"></div>

有人能指出我正确的方向吗？

Answer 1

您使用了两种不同的 html 结构以及错误的 JQuery 选择器。

尝试以下 html 和 Jquery 代码:

演示: https://jsfiddle.net/9ewogtwL/150/

<div class="wrapper">
    <video class="video">
        <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
    </video>
    <div class="playpause"></div>
</div>

使用此 JQuery 代码:

$('.wrapper').click(function () {    
    var videoEl = $(this).find("video").get(0);
    if( videoEl.paused ){
        videoEl.play();
        $(this).find(".playpause").fadeOut();
    }else{
        videoEl.pause();
        $(this).find(".playpause").fadeIn();
    }
});