I'm new to this site and I am new to HTML5 and Javascript aswell.
It's not that I am a beginner, I kinda understand HTML5 and Javascript when I see it, I just can't write it proper myself.
I have many videos, all mp4, all same size, all in the same folder on the server.
I already got them to play one after another without break. I don't have any controls.
Looks like this (a code I found and copied and changed as far as I understood it):
BODY
<video id="homevideo" width="1022px" height="766px" autoplay onended="run()">
<source src="video1.mp4" type='video/mp4'/>
</video>
SCRIPT
<script>
video_count =1;
videoPlayer = document.getElementById("homevideo");
function run(){
video_count++;
if (video_count == 16) video_count = 1;
var nextVideo = "video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
};
</script>
It all looks like this now:
Presentation
What I want:
I want a previous and a next function.
So, I have two buttons, a previous and a next button. When I click on the next button, the next video will start and play automatically (no loop). When I click on previous button, the previous video will play again (no loop). So I can simply switch between all my videos forward and backwards.
Like this for example:
IMAGE
What do I have to add to my code? What to change? I know hot do make buttons ect.
Would be nice if someone could give me a clear code for this. Nothing with play or pause or anything.
Thanks very much!
First step is to add an event handler to each button. For example, something like this should work for your next button.
var el = document.getElementById("nextButton");
if (el.addEventListener) {
el.addEventListener("click", yourNextFunction, false);
} else {
el.attachEvent('onclick', yourNextFunction);
}
Then you need to write the yourNextFunction function to move to the next video. You can base this on your existing code.
var video_count =1,
videoPlayer = document.getElementById("homevideo");
function yourNextFunction (){
video_count++;
if (video_count == 16) video_count = 1;
var nextVideo = "video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
}
You can then do something similar for the previous button.
<script>
var videocount =1;
var player=document.getElementById('homevideo');
player.addEventListener('ended',dispositor);
function dispositor(x){
if(!x)
{ x = window.event; }
videocount++;
if (videocount > 2){ // last number of video playing in loop.
videocount = 1;}
player.src="video"+videocount+".mp4"; //complete url
}
</script>
<video id="homevideo" autoplay="" controls webkit-playsinline="" width="100%" height="100%" >
<source src="video1.mp4" type="video/mp4">
</video>
Try with the code below:
<video id="homevideo" autoplay="" controls webkit-playsinline="" width="100%" height="100%" >
<source src="video1.mp4" type="video/mp4">
<script>
video_count =1;
videoPlayer = document.getElementById("homevideo");
function run(){
video_count++;
if (video_count == 16)
video_count = 1;
var nextVideo = "video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
};
</script>
</source>
</video>
Related
I am aware that this question might have been asked here a few times, however I could not find a solution I've been looking for. We have a requirement where the users should be able to pause the video and resume from where they left.
I was able to get to the point where I am able to store and fetch the paused time from local storage, however I have been facing challenges playing the video from the stored value. Below is the code.
<video id="myVideo" width="300" height="300" controls>
<source src="Bunny.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video><br />
<button onclick="PlayVideo()" type="button" id="PlayVideo">Play</button>
<script>
var vid = document.getElementById("myVideo")
function getCurTime() {
return vid.currentTime
}
var isPlaying = false
var PausedTime
function PlayVideo() {
var change = document.getElementById("PlayVideo")
if (isPlaying) {
vid.pause()
//Storing the paused time to local storage
localStorage.setItem('CaptureTime', getCurTime())
//Get the saved time from local storage
PausedTime = localStorage.getItem('CaptureTime')
change.innerHTML = "Play"
}
else {
vid.play()
change.innerHTML = "Pause"
}
isPlaying = !isPlaying
}
</script>
Would appreciate if anyone here could help me out with this.
Please let me know if more details are needed.
You should only get the time when playing, and save on pause. Set the current time to the local storage paused time when being played. Like this:
var vid = document.getElementById("myVideo");
function getCurTime() {
return vid.currentTime;
}
var isPlaying = false;
var PausedTime;
function PlayVideo() {
var change = document.getElementById("PlayVideo");
//Get the saved time from local storage
var PausedTime = localStorage.getItem('CaptureTime');
if (isPlaying) {
vid.pause();
//Storing the paused time to local storage
localStorage.setItem('CaptureTime', getCurTime());
change.innerHTML = "Play";
}
else {
vid.currentTime = PausedTime;
vid.play();
change.innerHTML = "Pause";
}
isPlaying = !isPlaying;
}
<video id="myVideo" width="300" height="300" controls>
<source src="Bunny.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video><br/>
<button onclick="PlayVideo()" type="button" id="PlayVideo">Play</button>
To pause and play a video in javascript you don't actually need to save the time to local storage.
That being said, if you still want to do it that way, you would just need to remember these lines:
localStorage.setItem('CaptureTime', getCurTime());
PausedTime = localStorage.getItem('CaptureTime');
vid.currentTime = PausedTime;
for reference
In addition, when I tried your code it wouldn't change the play to pause, so I made a few adjustments.
This is how I implemented it all:
<html>
<body>
<button id="controls" onclick="play()" type="button">Play Video</button><br>
<video id="myVideo" width="320" height="176">
<source src="Bunny.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
var isPlaying = false; //or this could be: var isPaused = vid.paused;
function play() {
if(!isPlaying){
vid.play();
document.getElementById("controls").innerHTML = "Pause Video";
}
else{
vid.pause();
document.getElementById("controls").innerHTML = "Play Video";
}
isPlaying = !isPlaying;
}
</script>
</body>
</html>
Check out these pages for more:
https://www.w3schools.com/js/js_htmldom_html.asp
https://www.w3schools.com/tags/av_met_play.asp
https://www.w3schools.com/html/html5_video.asp
I have a javascript code that play a video after another video previously load in the video src. What i want is when the second video ended automatically redirect me to other page, here is my code:
<script type="text/javascript">
var videoplayer = document.getElementById("videoplayer");
var video = $('video')[0];
videoplayer.addEventListener('click',function(){
videoplayer.play();
},false);
videoplayer.addEventListener('ended',function(){
var nextVideo = "C:/Users/Video Turismo/Desktop/Spots y videos/Vidios/Lamb.mp4";
videoplayer.src = nextVideo;
videoplayer.pause();
$('video').unbind('ended');
window.location("www.google.com");
},false);
</script>
<video width="100%" height="50%" controls id="videoplayer" >
<source src="C:/Users/Video Turismo/Desktop/Spots y videos/Vidios/NEGAS.mp4">
</video>
I think you should ask if the video.src is not already the nextVideo and then change location or whatever. This way you know the second video ended.
var videoplayer = document.getElementById("videoplayer");
var video = $('video')[0];
videoplayer.addEventListener('click', function(){
videoplayer.play();
},false);
videoplayer.addEventListener('ended', function(){
var nextVideo = "C:/Users/Video Turismo/Desktop/Spots y videos/Vidios/Lamb.mp4";
if (videoplayer.src == nextVideo) {
window.location("www.google.com");
}
videoplayer.src = nextVideo;
videoplayer.pause();
}, false);
<video width="100%" height="50%" controls id="videoplayer" >
<source src="C:/Users/Video Turismo/Desktop/Spots y videos/Vidios/NEGAS.mp4">
</video>
Is there any way to play a video in html5, stop and execute javascript at known points within the video?
Yes, try this. You have to use the currentTime property. Start with that and start your javascript functions from there. Is that what you're looking for?
var vid = document.getElementById("video");
//Add a timeupdate listener
video.addEventListener("timeupdate", function(){
//Check for video properties from within the function
if (this.currentTime == 5)
this.pause();
//cal javascript
}
}
Looking at the accepted answer over here it looks like it is possible.
To pause the video you just do this:
var mediaElement = document.getElementById("video"); // create a reference to your HTML5 video
mediaElement.pause(); // pauses the video
If you want to play the video, do this:
mediaElement.play(); // plays the video
To get the current time in the video, do this:
mediaElement.currentTime; // gets the current time
Here's an example linking them all up:
var mediaElement = document.getElementById("video");
if(mediaElement.currentTime == 35){
mediaElement.pause();
// do whatever else you would like
mediaElement.play();
}
The MDL documentation is here, there are plenty of other properties you might find helpful.
Hope this helps!
Yes, by doing like this you can.
Note that you have to look for a time using bigger than > bigger than (as the chance to match an exact millisecond is almost zero), and have a variable in one way or the other to know which ones is done.
window.addEventListener('load', function() {
var cur = document.querySelector('#cur'),
vid = document.querySelector('#vid')
})
var appDone = {"done7":false,"done4":false}
vid.addEventListener('timeupdate', function(e) {
if (e.target.currentTime > 7 && !appDone.done7) {
appDone.done7 = true;
e.target.pause();
//do something
cur.textContent += ", " + "done7 once";
e.target.play();
}
if (e.target.currentTime > 4 && !appDone.done4) {
appDone.done4 = true;
e.target.pause();
//do something
cur.textContent += ", " + "done4 once";
e.target.play();
}
})
<video id="vid" width="320" height="176" controls>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p id="cur"></p>
I have a JS function that changes the video source of an HTML video. A button activates this function. It loads the same new video on switch. There are 2 videos of the same length.
How do I:
interchange the video every time I click the button?
when i click the button, can the video load at the same time the previous video was playing?
HTML:
<button onclick="myFunction()" type="button">Change Video</button><br>
<video id="myVideo" controls autoplay>
<source id="mp4_src" src="video1.mp4" type="video/mp4">
<source id="mp4_src" src="video2.mp4">
</video>
JS
var vid = document.getElementById("myVideo");
function myFunction() {
vid.src = "video2.mp4";
vid.load();
}
Here is the fiddle that solves both of your problems, http://jsfiddle.net/egjyd9rs/5/
Basically, the toggle function which takes care of both is as below,
function myFunction() {
currentlPlayingTime = vid.currentTime;
if (currentlyPlaying === 1) {
vid.src = src2;
currentlyPlaying = 2;
statusElement.innerText = 'Going to play video2..';
} else {
vid.src = src1;
currentlyPlaying = 1;
statusElement.innerText = 'Going to play video1..';
}
vid.load();
vid.addEventListener('loadedmetadata', function () {
vid.currentTime = currentlPlayingTime;
}, false);
}
I have a number of videos playing one by one in the same HTML5 video player
HTML
<video id="homevideo" width="100%" autoplay autobuffer>
<source src="app/video1.mp4" type='video/mp4' />
</video>
JS
video_count = 1;
videoPlayer = document.getElementById("homevideo");
videoPlayer.addEventListener("ended", function (){
video_count++;
if (video_count == 4) video_count = 1;
var nextVideo = "app/video" + video_count + ".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
}, false);
If I put an alert before playing, it's working. But without the alert it's not. Initialize the second video play:
videoPlayer.src = nextVideo;
alert("a");
videoPlayer.play();
The html5 video element has an own eventtype onended, you dont need your own eventlistener.
Html:
<video id="homevideo" width="100%" autoplay onended="run()">
<source src="app/video1.mp4" type='video/mp4'/>
</video>
and
Script:
video_count =1;
videoPlayer = document.getElementById("homevideo");
function run(){
video_count++;
if (video_count == 4) video_count = 1;
var nextVideo = "app/video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
};
PS: Keep in mind that providing only one format for your video is not enough since no single format is supported by all major browsers yet.
EDIT:
LINK
Source: w3schools
At Media Events
Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media elements, like <audio>, <embed>, <img>, <object>, and <video>):
onended:
Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")