如何在視頻播放結束時顯示 html5 視頻海報？
[英]How to show html5 video poster end of video play?
問題描述
我想在播放后顯示視頻海報。 我正在嘗試以下代碼，但沒有運氣。
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
this.posterImage.show();
});
6 個解決方案
解決方案1
14 2014-04-10 06:20:14
一種更直接的方法：
<script type="text/javascript">
var video= $('#cms_video').get(0);
video.addEventListener('ended',function(){
video.load();
},false);
</script>
這是 loganphp 答案的快捷方式。 實際上，在更改視頻標簽的 src 時，您會在其上隱式調用 load()。
此方法有一個警告，即再次請求媒體 URL，並且根據緩存設置，它可能會重新下載全長媒體資源，從而導致客戶端不必要的網絡/CPU 使用。 但它仍然以 loganphp 的方式回答了這個問題。
如果您想繞過這個警告，您可以使用並覆蓋圖像/div 並在其上綁定一個 click/touchstart 事件以顯示視頻標簽並隱藏覆蓋層。 當結束事件觸發時，只需隱藏視頻標簽並顯示疊加圖像。
解決方案2
6 已采納 2014-04-04 11:14:33
最后我用以下代碼實現了我的目標
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
});
解決方案3
0 2014-04-04 13:56:07
只需在視頻的末尾，顯示一個與海報 src 相同的 div（使用上 z-index 或隱藏視頻）如果您需要重播視頻，請在顯示的 div 上綁定一個點擊事件（以切換可見性和重播)
解決方案4
0 2017-05-31 09:10:01
**視頻開始自動播放並在視頻結束時顯示海報**
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<body>
<script type="text/javascript">
document.observe('dom:loaded', function(evt){
$$('video').each(function(elm){
elm.play();
var wrapper = elm.wrap('span');
var vid = elm.clone(true);
elm.observe('ended', function(){
wrapper.update(vid);
});
});
});
</script>
<video id="myvideo" poster="1.png" >
<source src="1.mp4" type="video/mp4" />
</video>
解決方案5
0 2020-07-13 17:56:17
嘗試這個
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
$('#cms_video')[0].autoplay=false
$('#cms_video')[0].load()
});
解決方案6
-1 2014-04-04 10:07:37
嘗試給你的海報一個id或 class 然后你可以這樣做：
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
$('#poster').show();
// ^ Use . here if you apply class instead of if for your poster
});
懸停播放HTML5視頻，導致海報無法顯示，視頻延遲
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.