it-swarm.com.de

HTML5-Video/Ende eines Videoplakats

<video controls="controls" poster="http://gifs.gifbin.com/1233925271_8be9acc.gif" style="width:800px;">

Mit dem oben genannten; Innerhalb des HTML5 <video>-Tags kann ich ein Poster hinzufügen. von einem Bild oder einem animierten .gif nur gut und läuft/läuft, bevor das eigentliche Video "abgespielt" wird.

JETZT, wie kann ich ein Bild hinzufügen? speziell ein .gif (animiertes .gif funktioniert mit einem Poster), das ausgeführt wird, nachdem das Video abgespielt wurde?

23
No-Spex

Kurz gesagt: Sie müssen video.addEventListener('ended',function() {}) hinzufügen und in Ihrem benutzerdefinierten JavaScript ausführen.

Hier ist ein verwandter Beitrag, der nach der Wiedergabe des Videos umleitet. Sie können es entsprechend ändern - HD5-Video nach Wiedergabe umleiten .

Referenzen, um detaillierte Informationen zu erhalten:

2
EL Yusubov

Ein einfacher Weg, dies zu tun: 

<script>
var video = document.querySelector('video');       
video.addEventListener('ended', function() {
  video.load();     
});
</script>

Wenn Sie den Quellcode eines Videotags ändern, rufen Sie implizit ein load () auf. 

Diese Methode hat den Vorbehalt, die Medien-URL erneut anzufordern. Abhängig von den Cache-Einstellungen kann die Medienressource in voller Länge erneut heruntergeladen werden, was zu einer unnötigen Netzwerk-/CPU-Nutzung für den Client führt. 

Ein besserer Weg, um dieses Problem zu lösen, ist die Verwendung eines Overlay-Images/div oberhalb des Video-Tags und das Ausblenden beim Start des Videos. Wenn das beendete Ereignis ausgelöst wird, wird das Überlagerungsbild erneut angezeigt. 

24
Arnaud Leyder

Am Ende habe ich ein Poster gesehen, nachdem das Video abgespielt wurde:

# Show poster at the end of the video
$('video').on('ended',->
  $('video')[0].autoplay=false
  $('video')[0].load()
)
6
Hackeron

versuche dies

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

Endlich habe ich die Lösung: Video wird beim ersten Start automatisch abgespielt und am Ende des Videos wird das Posterbild angezeigt 

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript">
 document.observe('dom:loaded', function(evt){
    $('#myVideo').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>
2
Niraj patel

Das funktioniert für mich.

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v; 
    video.pause();          
}); 
1
Viktor Kocev

dieses Problem wurde durch Hinzufügen eines zusätzlichen Frames (Poster) am Ende des Videos gelöst, da das Einfügen von Javascripts durch die Website nicht unterstützt wurde

0
player0

Ich hatte das gleiche Ziel und fand eine Lösung, indem ich mit jQuery die Quelle des Videos auf sich selbst zurücksetzte. Jetzt bekomme ich vor und nach dem Abspielen ein animiertes GIF-Poster ... Hier gibt es eine einfache Javascript-Spielfunktion und den jQuery-Code.

function play()
    {
    movie_ID.play(); 

    $(document).ready(function(){
         $("#movie_ID").bind("ended", function() {
        $('#movie_ID').attr('src', 'movie_ID.src');
            });
         });   
     }  
0
weshen

Wenn Sie am Ende ein Poster haben möchten, und das ist die einzige Anforderung, dann würde ich sagen, dass Sie einfach ein Endbild in der Videodatei als dieses Poster hinzufügen und das Laden unnötiger JS überspringen. Wenn das Video endet, sehen Sie das Endbild, das jetzt das hinzugefügte Poster ist.

Wenn Sie das Videoposter am Ende anzeigen oder das Video mit anderen Worten laden möchten, verwenden Sie das benutzerdefinierte Ereignis, wie oben von EL Yusubov gezeigt

0
sunnyuff