jQuery視頻疊加按鈕

我試圖爲我的HTML 5視頻創建疊加播放按鈕。我在Jfiddle - click here上創建了一個示例 - 此工作正常。我試圖將我的小提琴整合到我的網站上，但是我收到錯誤消息Cannot read property 'paused' of undefined。相信這與我的代碼結構有關。下面是我的代碼如何設置的一個片段。jQuery視頻疊加按鈕

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

任何人都可以點我在正確的方向？

來源

2016-09-21 NewBoy

什麼'$（本）。兒童（「視頻」）'返回在'else'塊？看起來它沒有子節點。 – AskYous

AskYous-你能喲詳細說明可能提供的例子來備份你說的話 – NewBoy

您使用兩個不同的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(); 
    } 
});

來源

2016-09-21 16:59:03

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>

來源

2016-09-21 17:09:10

jQuery視頻疊加按鈕

回答

相關問題