多次調用HTML5視頻結束事件

我在播放HTML5視頻和結束事件時遇到問題。我查看一些HTML內容，過了一段時間後我會播放一段視頻。視頻結束了，我將再次顯示HTML內容。這應該循環。它的演示。多次調用HTML5視頻結束事件

我的問題是，在第一次完整運行後，結束事件將重複觸發，並且HTML內容將顯示爲false。

下面是部分代碼：

function playVideo() { 
    var video = $('video')[0]; 
    video.addEventListener('ended', function() { 
     $('video').hide(); 
     fadeShow(); 
    }, false); 
    video.play(); 
} 

function fadeHide() { 
    $('#content').fadeOut(1200, function() { 
     $('div ul[id^=item]').each(function() { 
      $(this).hide(); 
     }); 
     $('li[class^=visitor] span[id]').each(function() { 
      $(this).hide(); 
     }); 
     playVideo(); 
    }); 
}

的fadeHide();功能不會調用兩次，只是video.addEventListener('ended', function() {};填充多次調用。 `fadeshow（）;將顯示HTML內容。其實我使用最新版本的Chrome。

有沒有人有一個想法出了什麼問題？

編輯 HTML視頻代碼。我用CSS隱藏視頻。

<video> 
    <source src="video/mp4/xxx.mp4" type="video/mp4" /> 
    <source src="video/ogg/xxx.ogg" type="video/ogg" /> 
    <source src="video/webm/xxx.webm" type="video/webm" /> 
    Your browser does not support the video tag. 
</video>

格爾茨

來源

2012-07-27 hofmeister

你可以在[jsfiddle]（http://jsfiddle.net/）中創建一個測試用例嗎？ – 2012-07-27 09:09:37

我會試一試。 – hofmeister 2012-07-27 09:13:36

看看這裏[鏈接]（http://jsfiddle.net/Vupz2/24/）。同樣的問題，在視頻顯示兩次後。我顯示一個提示'fadeShow（）;'的調用。對不起，我沒有找到一個較短的視頻。 – hofmeister 2012-07-27 09:32:03

您應該一次給事件偵聽器或當你將它在播放每次，你需要再次分離事件偵聽器。

function playVideo() { 
    var video = $('video')[0]; 
    video.addEventListener('ended', function() { 
     $('video').hide(); 
     video.removeEventListener('ended'); <<<<<<< 
     fadeShow(); 
    }, false); 
    video.play(); 
}

編輯：我在鉻測試這個fiddle而事實上，即使你刪除事件偵聽它開始觸發多次。似乎有一個問題，即刪除事件偵聽器無法正常工作。

您應該將事件綁定/解除綁定爲jQuery，然後只有一個結束事件。

function playVideo() { 
    var video = $('video')[0]; 
    $('video').bind('ended', function() { 
     $('video').unbind('ended'); 
     $('video').hide(); 
     fadeShow(); 
    }); 
    video.play(); 
}

而且your fiddle更新（更短視頻）

來源

2012-07-27 08:27:55

哦，你說得對！我怎麼會錯過這個:)。我只會添加一次活動。謝謝你的幫助！ – hofmeister 2012-07-27 08:35:33

也許有幾句話可以解釋：每次你調用'playVideo'時，都會創建一個** new **事件處理函數，而所有以前創建的函數將保持而不是被覆蓋。這就是爲什麼它第一次正確工作，然後開始多次發射。 – insertusernamehere 2012-07-27 08:42:06

@insertusername這裏感謝您的擴展解釋。 +1 – 2012-07-27 08:49:54

而是手動添加一個事件偵聽器，然後刪除它，儘量簡單地使用內置的名爲命令「一」（https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#one-first-second-third-）

所以你的代碼將變得有些像這樣：

function playVideo() { 
 
    var video = $('video')[0]; 
 
    $('video').one('ended', function() { 
 
     $('video').hide(); 
 
     fadeShow(); 
 
    }); 
 
    video.play(); 
 
}

這有點簡單，更依賴於API本身。我相信這通常是一種很好的做法，因爲API中的功能已經在多個瀏覽器和操作系統上由社區中的大量人員進行過多次測試。

來源

2015-07-11 07:21:01

多次調用HTML5視頻結束事件

回答

相關問題