Wie bekomme ich ein Video zum pausieren, ein anderes Video abspielen und zum Originalvideo zurückkehren

Ich habe zwei Videos, ich möchte das erste Video für 10 Sekunden abspielen, pausieren, das zweite Video abspielen, und wenn das zweite Video hat gestoppt, kehren Sie zum ersten Video von wo es aufgehört hat. Ein bisschen wie eine Werbung/Werbung. Momentan habe ich zwei Videos, die nacheinander abspielen, nachdem der erste komplett beendet ist. Ich weiß, dass die Lösung im javascript Ereignishandler ist, aber ich kann nicht scheinen, es richtig zu machen. Jede Hilfe wird sehr geschätzt.Wie bekomme ich ein Video zum pausieren, ein anderes Video abspielen und zum Originalvideo zurückkehren

HTML:

<div class="vidBox" id="contain"> 

    <video id="video1" class="vid" muted controls="true" height="300" width="500"> 
     <source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4"> 
    </video> 

    <video id="video2" class="vid2" autoplay muted controls="true" style="display:none;" height="300" width="500"> 
    <source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4"> 
    </video> 

</div>

JavaScript:

var vid = document.getElementById('video1'); 
vid.addEventListener("ended", hideVideo, false); 

function hideVideo() { 
    var vid = document.getElementById('video1'); 
    var vid2 = document.getElementById('video2'); 
    vid.removeEventListener("ended", hideVideo, false); 
    vid.style.display='none'; 
    vid2.style.display='block'; 
}

Quelle

2017-03-29 T.Doe

Hier ist eine Lösung, getestet auf Chrome, Safari, Firefox: (Ich habe das zweite Video verändert der Lage sein, zu sagen, ob es funktioniert , aber Sie können das, das Sie natürlich wollen) einstellen:

<!DOCTYPE html> 
<html> 

<head> 
</head> 
<body> 

<div class="vidBox" id="contain"> 

    <video id="video1" class="vid" muted controls="true" height="300" width="500" autoplay> 
     <source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4"> 
    </video> 

    <video id="video2" class="vid2" autoplay muted controls="true" style="display:none;" height="300" width="500"> 
    <source src="myVideo3.mp4" type="video/mp4"> 
    </video> 

</div> 

<script type="text/javascript"> 
var vid = document.getElementById('video1'); 
vid.addEventListener("ended", hideVideo, false); 

function hideVideo(event) { 
    console.log("hideVideo"); 
    var vid = document.getElementById('video1'); 
    vid.pause(); 
    vid.style.display='none'; 
    vid.removeEventListener("ended", hideVideo, false); 

    var vid2 = document.getElementById('video2'); 
    vid2.style.display='block'; 
    vid2.addEventListener("ended", hideVideo2, false); 
    vid2.load(); 
} 

function hideVideo2(event) { 
    console.log("hideVideo2"); 
    var vid2 = document.getElementById('video2'); 
    vid2.style.display='none'; 

    var vid = document.getElementById('video1'); 
    vid.style.display='block'; 
    vid.play(); 
} 

// start timer in milliseconds 
setTimeout(hideVideo, 10000); 

</script> 

</body> 
</html>

Quelle

2017-03-29 16:18:41 WeHumLove

Das funktioniert gut, danke aber es gibt ein kleines Problem .. Das zweite Video beginnt pl aying zur eingestellten Zeit ist Timeout. Ich möchte, dass das zweite Video um 00:00 Uhr seines eigenen Videos startet. Hast du eine Lösung dafür? –

Wir können den Befehl load() hinzufügen, um von Anfang an zu beginnen, siehe Änderungen im obigen Code, Grüße – WeHumLove

Wie bekomme ich ein Video zum pausieren, ein anderes Video abspielen und zum Originalvideo zurückkehren

Antwort

Verwandte Themen