Question

我尝试为HTML 5视频创建叠加播放按钮。我在Jfiddle - click here上创建了一个示例 - 这很好用。我试图将我的小提琴集成到我的网站上，但是我收到了错误消息Cannot read property 'paused' of undefined。相信这与我的代码结构有关。下面是我的代码设置方式的片段。

 $('.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代码：

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

Answer 2

DEMO网址： JSBIN-DEMO

<强> JQUERY

  $('.video').on('click',function () {
       $player=$(this).find("video")[0];
    if($player.paused){
      $player.play();
      $(this).find('.playpause').fadeOut();
    }
    else{
      $player.pause();
      $(this).find('.playpause').fadeIn();

    }
     });

<强> HTML

 <div class="col-md-12 video">
    <video muted loop controls poster="">
    <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    </video>
    <div class="playpause">PLAY</div>
      <div>

jQuery视频叠加按钮

2 个答案: