2014-04-04 25 views
5

Tôi muốn hiển thị áp phích video sau khi phát. Tôi đang thử mã sau nhưng không may mắn.Làm cách nào để hiển thị kết thúc áp phích video html5 khi phát video?

var video=$('#cms_video').get(0); 
video.play(); 
video.addEventListener('ended',function(){ 
    this.posterImage.show(); 
}); 
+0

có thể trùng lặp của [HTML5 Video/Kết thúc một Poster Video] (http://stackoverflow.com/questions/14245644/ html5-video-end-of-a-video-poster) –

Trả lời

-1

Cố gắng đưa ra poster của bạn một id hoặc lớp sau đó bạn có thể làm:

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 
}); 
+2

Tôi không muốn áp dụng bất kỳ lớp nào. Tôi muốn hiển thị áp phích video. Áp phích video có nghĩa là trình phát video html có tên thuộc tính của áp phích, Nó hiển thị trong khi tải trình phát video và trước khi phát video. Bây giờ tôi muốn hiển thị cuối poster này của chơi video. – LoganPHP

+0

Bạn có thể hiển thị đánh dấu HTML của mình không? – Felix

+0

LoganPHP

4

Cuối cùng tôi đã đạt được mục tiêu của tôi với mã sau đây

var video=$('#cms_video').get(0);   
video.play(); 
video.addEventListener('ended',function(){ 
    v=video.currentSrc; 
    video.src=''; 
    video.src=v;    
}); 
+0

cố gắng xem câu trả lời của tôi, tôi nghĩ nó đơn giản hơn một chút –

0

Đơn giản chỉ cần vào cuối video, hiển thị div có cùng src của poster (với chỉ mục z trên hoặc ẩn video) Nếu bạn cần phát lại video, hãy liên kết sự kiện nhấp chuột trên div được hiển thị (để chuyển đổi chế độ hiển thị nd replay)

8

Một cách đơn giản hơn để làm điều này:

<script type="text/javascript"> 
var video= $('#cms_video').get(0);  
video.addEventListener('ended',function(){ 
    video.load();  
},false); 
</script> 

Đó là một phím tắt để loganphp câu trả lời. Thật vậy khi thay đổi src của một thẻ video bạn ngầm gọi một tải() trên đó.

Phương pháp này có báo trước để yêu cầu lại URL phương tiện và tùy thuộc vào cài đặt bộ nhớ đệm có thể tải xuống tài nguyên phương tiện có độ dài đầy đủ khiến cho việc sử dụng mạng/CPU không cần thiết cho máy khách. Nhưng nó vẫn trả lời câu hỏi cách loganphp hỏi nó.

Nếu bạn muốn bỏ qua cảnh báo này, bạn có thể sử dụng và che phủ hình ảnh/div và liên kết sự kiện nhấp/chạm trên đó để hiển thị thẻ video và ẩn lớp phủ. Khi sự kiện đã kết thúc đã kích hoạt, chỉ cần ẩn thẻ video và hiển thị hình ảnh lớp phủ.

0

** đoạn video bắt đầu autoplay và Poster cho thấy ở phần cuối của video **

<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> 
Các vấn đề liên quan