I am working on a functionality where on my screen load, a video should start playing reverse. (from its last frame to the first frame).
It can actually be on screen load or even on a button click.
At this moment, I've achieved until (with the help and support from StackOverflow) playing my video - and playing it in reverse after some duration of time. Here's the code I used-
<!DOCTYPE HTML>
<html>
<head>
<style>
video{
height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var video = document.getElementById('video');
var intervalRewind;
$(video).on('play',function(){
//video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$(video).on('pause',function(){
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$("#speed").click(function() { // button function for 3x fast speed forward
video.playbackRate = 8.0;
});
$("#negative").click(function() { // button function for rewind
intervalRewind = setInterval(function(){
video.playbackRate = 1.0;
if(video.currentTime == 0){
clearInterval(intervalRewind);
video.pause();
}
else{
video.currentTime += -.1;
}
},30);
});
});
</script>
</head>
<body>
<video id="video" controls>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="speed">Fast Forward</button>
<button id="negative">Rewind</button>
</body>
</html>
Now, I would like to know if there is a chance to play my video in reverse directly i.e. without progressing any duration in the forward direction, the video should start playing in reverse.
You need to wait until video is loaded, then you can get it's length with video.duration and then you can set the video current time to this value (Jump to end of the video);
Then you can start playing the video from last frame to first using your negative function.
video.addEventListener('loadeddata', function() {
video.currentTime = video.duration;
$('#negative').click();
}, false);
There is also nice fiddle about video playbacks at http://jsfiddle.net/UkMV2/5/ found from play a video in reverse using HTML5 video element
Following example is super slightly modified version of your's which achieves the "reverse" playback upon page & video loaded event.
<!DOCTYPE HTML>
<html>
<head>
<style>
video{
height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<video id="video" controls>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="speed">Fast Forward</button>
<button id="negative">Rewind</button>
<script>
$(function() {
var video = document.getElementById('video');
var intervalRewind;
$(video).on('play',function(){
//video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$(video).on('pause',function(){
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$("#speed").click(function() { // button function for 3x fast speed forward
video.playbackRate = 8.0;
});
$("#negative").click(function() { // button function for rewind
intervalRewind = setInterval(function(){
video.playbackRate = 1.0;
if(video.currentTime == 0){
clearInterval(intervalRewind);
video.pause();
}
else{
video.currentTime += -.1;
}
},30);
});
video.addEventListener('loadeddata', function() {
video.currentTime = video.duration;
$('#negative').click();
}, false);
});
</script>
</body>
</html>
Related
How do you detect when a HTML5 <video> element has finished playing?
You can add an event listener with 'ended' as first param
Like this :
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
Have a look at this Everything You Need to Know About HTML5 Video and Audio post at the Opera Dev site under the "I want to roll my own controls" section.
This is the pertinent section:
<video src="video.ogv">
video not supported
</video>
then you can use:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>
onended is a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) events documentation.
JQUERY
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});
HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Event types HTML Audio and Video DOM Reference
You can simply add onended="myFunction()" to your video tag.
<video onended="myFunction()">
...
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
function myFunction(){
console.log("The End.")
}
</script>
Here is a simple approach which triggers when the video ends.
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html>
In the 'EventListener' line substitute the word 'ended' with 'pause' or 'play' to capture those events as well.
Here is a full example, I hope it helps =).
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
alert("Video Finished");
}
</script>
</body>
</html>
You can add listener all video events nicluding ended, loadedmetadata, timeupdate where ended function gets called when video ends
$("#myVideo").on("ended", function() {
//TO DO: Your code goes here...
alert("Video Finished");
});
$("#myVideo").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 50;//50 seconds
//TO DO: Your code goes here...
});
$("#myVideo").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");
//TO DO: Your code goes here...
var perc=cTime * 100 / this.duration;
if(perc % 10 == 0)//Alerts when every 10% watched
alert("Video played "+ perc +"%");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>
Im trying to show the current duration (print currenttime live) when the video is playing.
I did read Kurt Van den Branden answer on Detect if HTML5 Video element is playing but to no avail
i eventually want to carry the currenttime value to a php variable $currenttime
below is my current code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Html5 media events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body >
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
<source src="http://action.news/videos/Britney%20Spears%20-%20Overprotected%20(2009)%20Full%20HD%201080p_60%20fps.mp4" type="video/mp4">
</video>
<script>
var media = document.getElementById('myVideo');
// Playing event
var isPlaying = function(e) {
#$("#output").html("Playing event triggered");
};
// durationchange
var isdurationchange = function(e) {
$("#output").html(vid.currentTime);
};
media.addEventListener("playing", isPlaying, false);
media.addEventListener("durationchange", isdurationchange, true);
</script>
</body>
</html>
you should be able to carry it like this , the pros will help you with syntax
document.write("<a href=/time.htm?currentTime='.media.addEventListener("timeupdate", isdurationchange, true).'>link</a>;);
listen event timeupdate instead of durationchange
(also correct your typo error as #Jeto mentions in comment)
var media = document.getElementById('myVideo');
// Playing event
var isPlaying = function(e) {
$("#output").html("Playing event triggered");
};
// durationchange
var isdurationchange = function(e) {
$("#output").html(media.currentTime);
};
media.addEventListener("playing", isPlaying, false);
// media.addEventListener("durationchange", isdurationchange, true);
media.addEventListener("timeupdate", isdurationchange, true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
<source src="http://fiber.westnet.ca:81/videos/Britney%20Spears%20-%20Overprotected.mp4" type="video/mp4">
</video>
Im trying to create a nice background video that has some text on top as well as a button that i can use to pause and unpause the video, the video works fine and loops, but i cant pause the video.
<html>
<head>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="dudleyByDrone.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>dudley</h1>
<p>Directed by joe bloggs
<p>original article
<p>blah blah</p>
<button>Pause</button>
</div>
</body>
</html>
js (I got this code from here and though it says "// only functional if "loop" is removed" i have tried removing "loop" and it still doesn't pause:
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function()
{
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})
The following code should allow you to pause the video
$(function() {
$('#polina button').on("click", function() {
$('video')[0].pause();
});
});
EDIT: changing pause(); to play(); will do exactly what you think it will.
You need to reference the button with more specificity.
var playPause = document.querySelector("#playPause");
There are changes throughout the source playButton changed to playPause which is not the problem only a preference. An indirect selector may or may not work well with document.querySelector() since it tends to accept simple selectors more readily (from experience, not sure if it's documented.)
SNIPPET
var vid = document.getElementById("bgvid");
var playPause = document.querySelector("#playPause");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
playPause.addEventListener("click", function() {
if (vid.paused) {
vid.play();
playPause.innerHTML = "Pause";
} else {
vid.pause();
playPause.innerHTML = "Paused";
}
})
<html>
<head>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>dudley</h1>
<p>Directed by joe bloggs
<p>original article
<p>blah blah</p>
<button id="playPause">Play/Pause</button>
</div>
</body>
</html>
Is there a way to switch between the audio and video tags in HTML5 on the fly?
Meaning that if the same source starts with video and selects "video off", the source will be copied over to the audio tag and resume playing. Same thing with the other way around.
Sure - just pause whatever's playing, set the <source> on the element you want to start, and set the new player to begin where the other left off:
var playing = "video";
var audio = document.getElementById("audio");
var video = document.getElementById("video");
var source = document.createElement("source");
source.setAttribute("src", "http://vjs.zencdn.net/v/oceans.mp4");
source.setAttribute("id", "sourceElement");
video.appendChild(source);
video.play();
document.getElementById("toggleAV").onclick = function(e) {
switch (playing) {
case "video":
video.pause();
video.setAttribute("class", "hidden");
video.removeChild(source);
audio.appendChild(source);
audio.currentTime = video.currentTime;
audio.setAttribute("class", "");
audio.play();
playing = "audio";
break;
case "audio":
audio.pause();
audio.setAttribute("class", "hidden");
audio.removeChild(source);
video.appendChild(source);
video.currentTime = audio.currentTime;
video.setAttribute("class", "");
video.play();
playing = "video";
break;
}
};
html,
body {
height: 100%;
width: 100%;
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>so</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
</head>
<body>
<video id="video" width="320" height="240" controls></video>
<audio id="audio" controls class="hidden"></audio>
<button id="toggleAV">Toggle AV</button>
</body>
</html>
I am trying to redirect to a different URL after a html video has ended. This cannot be using a FLASH player as it won't work on iOS devices. Any help or direction will be appreciated. Here is my code:
<head>
<script type="text/javascript">
myVid = document.getElementById("video1");
function redirect()
{
if (myVid.ended == true) {
window.location = "http://www.google.com";
}
</script>
</head>
<body>
<video id="video1" controls="controls">
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
set the id of your video to 'myvid' and here is the solution
video = document.getElementById('myvid');
video.addEventListener('ended',function() {alert('video is ended');
window.location.href = 'http://www.google.com';})
here is the demo
use window.location.replace('http://www.google.com'); so user dosnt get stuck in back button loops
<script>
var video1 = document.getElementsByTagName('video1')[0];
video1.onended = function(e) {
window.location.replace('http://www.google.com');
}
</script>
Javascript:
document.getElementById('video-id').addEventListener('ended',function(){
window.location.href = 'http://www.your-url.com';
},false);
jQuery:
$("#video-id").on("ended", function() {
window.location.href = 'http://www.your-url.com';
});
Youtube:
How to detect when a youtube video finishes playing?
This worked for me :
<script>
function videoEnded() {
location.href="https://www.google.com";
}
</script>
<video id="myVideo" width="640" height="480" controls autoplay onended="videoEnded()">
<source src="video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>