Seamlessly swapping videos - javascript

I was curious what the best way to seamlessly swap from one video to another would be. The overall goal would be to play an intro video, and when that video ends, play a 2nd video of a looping animation.
Which method would work best for this?
Creating an event listener that starts the 2nd video and hides the first video as soon as the first video ends
OR having it all in one video, where the event listener waits until the end of the video and resets the time to where the loop begins
For the 2nd option, let's say the video is 10s long, the intro part is 4s, and the loop part is 6s. We would wait until the 10s mark and restart at 4s once the video plays through once.
Is there a better way to do this or is one of these options the right way?

I would use method 1. Adding a listener and code to play the second video would be easy:
<video src="video.ogv" id="intro">
video not supported
</video>
<video src="video.ogv" id="loop">
video not supported
</video>
<script type='text/javascript'>
var vid = document.getElementById("loop");
vid.loop = true;
vid.pause()
document.getElementById('into').addEventListener('ended',myHandler,false);
function myHandler(e) {
vid.play()
}
</script>
You can then also add Jquery hide and show to make it more seamless.

Related

Html Video ended event not working with start and end time declaration in element

I add the start and end time in the html video tag and write code in video ended event. But the issue is when I use start and end time in the html video tag the ended event not working but its working fine without using start and end time.
Html Video Tag
<video style="object-fit: fill;" class="videocls" width="780" height="363" id="vid">
<source src="/newhope/upload/1562979764.mp4#t=55,72" type="video/mp4">
</video>
Video Stop Event
$("#vid").bind("ended", function() {
alert('hit me');
});
I want to fire this ended event when ever particular duration mention in html video tag completed.
I find the solution for this problem. Ended event fire when the video finish completely. For this I use onpause event. When we are using the start and end interval in it pause the video not end the video so onpause event is working with this. Here is the code I am using now and its work for me
document.getElementById("vid").onpause = function() {
alert("The video has been paused");
};

Javascript autoplay video (mp4) on Opera browser?

I have made a website which we use on a TV to welcome guests/customers to our business. There's a SQL database which we write their names to be presented on the screen, and there is also a video which is playing in a different frame on the same website.
This all works very well on desktop PC Chrome. But we use the built in browser in the TV (which is a business model used for stuff like this). The browser is Opera and it supports HTML5.
Problem is that after a while, can be 2 hours, can be a day, it will stop playing the video, and just show a black frame.
This is the code:
<source src="video/video1.mp4" type='video/mp4'/>
</video>
<script type='text/javascript'>
video_count =1;
videoPlayer = document.getElementById("video");
function run(){
video_count++;
if (video_count == 3) video_count = 1;
var nextVideo = "video/video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
videoPlayer.loop();
};
</script>
This will play the files named video1.mp4 and video2.mp4... etc. Right now there is only one file in this folder called video1.mp4, and it will autoplay and it will loop. But it will fail to autoplay after a while and just show a black frame.
Any ideas?
Thanks!
I'd recommend looking into video events with javascript in this case if you're starting to see bugs.
For example (from Detect when an HTML5 video finishes post) you could start playing your next video like this:
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
You could simply move on to the next video, or seek back to 0 on its timeline and play it again. The other option if you're wanting to loop 1 video, you'd be better using the loop option in your <video> tag:
<video loop>
<source src="video/video1.mp4" type="video/mp4">
</video>

audio onended not firing in Ionic

I am currently making a simple music app with the Ionic framework as practice. This is my first time working with Ionic and first time working with AngularJS. Right now i want to make sure that when a song from a certain playlist is finished, the next one starts. However, the onended HTMLproperty doesn't seem to do anything.
First Try
menu.html
<audio ng-src="{{ audioSrc }}" controls class="player" id="trackPlayer" autoplay="true" onended="nextTrack()">
<source type="audio/mpeg">
Your browser does not support the audio element.
</audio>
controller.js
//check if audio is finished
$scope.nextTrack = function () {
//find the right playlist and right current song id
alert("ended");
console.log($rootScope.nowPlaying);
//set new audiosrc for audioplayer
}
I'm also trying to target the audioplayer directly by javascript, but this doesn't work either.
Second try
controller.js
document.getElementById('trackPlayer').addEventListener('onended', $scope.nextTrack());
Putting an alert('ended!') in onended in my audio tag works but anything else does not give a response when my audio is done playing.
I have looked all over but did not find a solution or an explenation yet.
Anybody knows what I am doing wrong?
Thanks in advance.

HTML5 video source changing

I have a video tag like this. All this videos have to play dynamically one after other
I tried writing some javascript functions in eventlistner "progress" of the video, but not working.How to play these videos automatically?anybody please suggest any codes in javascript or jquery
<div id="divVid">
<video id="video1" width="320" height="240" autoplay >
<source src="vid_future technology_n.mp4#t=20,50" >
Your browser does not support the video tag.
</video>
</div>
JS Code (Updated from comment section)
document.getElementById("video1")
.addEventListener("progress",
function () {
var i = 0;
var vid = document.getElementById("video1");
if (vid.paused) {
if (vid.currentSrc == myvids[i]) {
vid.currentSrc = myvids[i + 1]; } i = i + 1;
}
});
The set of <source> elements provide alternative formats for the video for different devices, not a playlist.
If you want to have a playlist, then listen for an ended event and change the src with JavaScript.
In response to edits to the question:
No, really change the src. You are trying to change the currentSource which is defined as being readonly
I said ended. Don't touch progress, you what to play the next video when the last one is finished, not when a tiny chunk of it has played
The list of <source> elements still isn't a playlist. Don't try to use them as such. Keep the list of videos somewhere else (e.g. a JS array).

Changing video on mouseclick?

I have two videos, and I want to loop the first video until the user clicks the mouse, at which point I want to switch to playing the second video. Does anyone know what the best way to do this would be?
Edit: Sorry, to clarify, I would prefer to use HTML 5 (assuming this is possible). I am trying to have the two videos swapped out seamlessly, one on top of another. I want it to look like clicking the mouse made the video finish or progress. So I need to pause/hide the first one and show/play the second one.
Update: With Galen's help and some Google searches, I figured it out:
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function swapVideos() {
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
video1.style.display = 'none';
var video2 = document.getElementsByTagName('video')[1];
video2.play();
}
</script>
<body>
<video src="video1.ogg" controls="controls" loop="loop" autoplay="autoplay" onclick="swapVideos();">
your browser does not support the video tag
</video>
<video src="video2.ogg" controls="controls" preload="preload">
your browser does not support the video tag
</video>
</body>
</html>
Add this code to the click event of whatever you want
// pause first video
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
// play second video
var video2 = document.getElementsByTagName('video')[1];
video2.play();
Add this to make the first video loop
var video1 = document.getElementsByTagName('video')[0];
video1.addEventListener('ended', function () {
video1.play();
});
it's tough to be specific with the information you have given, but you could use javascript or jquery to do this. Bind a click event to a DOM element, and on click change the source of the video. I am assuming that the video is determined by a source parameter in an swf.

Categories

Resources