Intentar reproducir un tráiler hasta que el usuario haga clic en algún lugar de la pantalla, después de lo cual se supone que el video de la conferencia se reproducirá una vez y luego volverá al tráiler. Me las arreglé para encontrar una pregunta similar aquí en StackOverflow, desafortunadamente, no puedo hacer que funcione completamente. El tráiler se repite y cuando hago clic en el botón, se reproduce el video de la conferencia, pero no inicia el video del tráiler y, en su lugar, solo reproduce el video de la conferencia.
¿Qué estoy haciendo mal aquí?
<video id="mp4Source" autoplay loop controls width="100%" src="/assets/trailer.mp4" > </video> <button type="button" name="button" onclick="playLectureVid()"> Play Lecture Vid</button> function playLectureVid(){ var video = document.getElementById("mp4Source"); video.src = '/assets/lecture.mp4'; video.load(); video.play(); video.addEventListener("ended", function(e) { e.currentTarget.removeEventListener(e.type, handler); video.src = '/assets/trailer.mp4'; video.load(); video.play(); }); }Solo cambia entre dos videos.
var trailer = document.getElementById("trailer"); var lecture = document.getElementById("lecture"); function playLectureVid() { lecture.style.display = 'block'; trailer.style.display = 'none'; trailer.pause(); lecture.play(); } lecture.addEventListener("ended", function(e) { trailer.style.display = 'block'; lecture.style.display = 'none'; lecture.pause(); trailer.play(); }); video { width: 400px; } #lecture { display: none; } <center> <button type="button" name="button" onclick="playLectureVid()"> Play Lecture Vid</button> <br> <video id="trailer" autoplay muted loop controls width="100%" src="https://jsoncompare.org/LearningContainer/SampleFiles/Video/MP4/Sample-MP4-Video-File-for-Testing.mp4"></video> <video id="lecture" controls width="100%" src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"></video> </center>En lugar de usar video.addEventListener("ended", , puede usar video.onend = () => {code here} . Luego, debido a que esto se llama cada vez que finaliza el video, inserte estas líneas en la parte superior de su función:
if (trailerLoaded) return trailerLoaded = true y agregue esto en la parte superior de playLectureVid :
var trailerLoaded = falseEsto hará que el video no se vuelva a cargar cada vez que termine.