移動Safari HTML5視頻 - 事件監聽器'結束'不會第二次觸發

我試圖在按下按鈕時添加按鈕將播放視頻，並在視頻結束時顯示圖像。問題是我第二次按下按鈕，視頻結束，沒有任何事情發生，就好像事件監聽器沒有被調用一樣。移動Safari HTML5視頻 - 事件監聽器'結束'不會第二次觸發

var video = document.getElementById("video"); 

function playVideo() { 
    video.style.display="block"; 
    //video.load() [adding this the 2nd time wont play] 
    video.play(); 
    video.addEventListener('ended', videoEnd, false); 
} 

function videoEnd() { 
    video.style.display="none"; 
    bg_image.src="image.jpg"; 
}

來源

2011-04-21 Jim

我發現，加入video.currentTime = 0.1;到videoEnd（）將讓事件偵聽器第二次觸發，但第三次，它不起作用。 – Jim 2011-04-21 02:59:19

我遇到了這個確切的問題，但在桌面Safari（5.0.5）上。 – JKS 2011-05-13 23:35:04

您是否在加載（）或play（）調用之前嘗試添加video.stop（）？ – derrylwc 2012-01-18 04:53:17

我相信，當VIDEO元素到達結尾時，「結束」事件不再觸發。顯然只有「暫停」事件觸發。

我已經通過簡單地聽取「timeupdate」事件並關聯處理器方法來檢查currentTime屬性是否等同於VIDEO元素的duration屬性。

更新：我有時會在iOS中看到「已結束」事件。我總是看到「暫停」事件。以下是一些在瀏覽器控制檯中顯示此信息的jQuery代碼：

(function ($) { 
     $("#vid").bind("timeupdate", function (e) { 
      console.log(e.type + " - " + (this.currentTime == this.duration)); 
     }); 
    })(jQuery);

來源

2011-10-18 19:50:24 natlee75

這裏的一個寫道，結束不顯示，因爲視頻停留時間總計時間：http://stackoverflow.com/questions/14714385/html-5-video-ended – 2015-04-01 14:14:07

-2

timeupdate works。但是，我更喜歡你使用它這樣的：

this.currentTime> =（this.duration-1）

否則，它不火的事件。

您可以購買視頻BG也： http://www.codegrape.com/item/html5-video-background/1306

來源

2014-06-14 10:04:39

這是由於在Safari瀏覽器的HTML5視頻標籤實現一個奇怪的錯誤。它也可以在Safari的Windows上重現。我剛剛找到了解決此問題的一種解決方法 - 僅綁定到loadedmetadata事件並將currentTime設置爲某個非零值。這裏有一個例子：

<!doctype html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 
</head> 
<body> 
<video id="video" width="500" height="400" controls autoplay></video> 
<script> 
var src = [ 
"http://content.adfox.ru/131007/adfox/205544/865991_11.mp4", 
"http://all.rutube.ru/130627/gpmdigital/217059/805529_11.mp4" 
]; 
var curSrc = 0; 
$(function() { 
$('#video').attr("src", src[curSrc % src.length]); 
curSrc++; 
var video = $('#video').get(0); 

$('#video') 
.on('loadedmetadata', function() { 
    video.currentTime=0.01; 
    video.play(); 
}) 
.on('ended', function() { 
    console.log('ended'); 
    video.src = src[curSrc % src.length]; 
    video.load(); 
    curSrc++; 
}); 
}); 
</script> 
</body> 
</html>

您可以在此的jsfiddle試試這個演示：http://jsfiddle.net/j2knz6sv/

來源

2014-12-04 01:00:58

移動Safari HTML5視頻 - 事件監聽器'結束'不會第二次觸發

回答

相關問題