We Keep Coding

How to change video tag's forwarding time

I have video tag on my website and when i click right arrow, it forwards with about 1 minute and i want to reduce this time to 10 seconds.
<video src="SOURCE" controls="true" id="video" style="height: 477px; width: 980px"></video>

You can attach an eventlistener directly to the video instead of the site.
var video = document.getElementById("video");
var timer = 10;
video.addEventListener('keydown', (e) => {
event.preventDefault();
switch (event.keyCode) {
case 37:
var currentTime = video.currentTime;
video.currentTime = currentTime - timer;
break;
case 39:
var currentTime = video.currentTime;
video.currentTime = currentTime + timer;
break;
}
});
<video controls="true" id="video" style="height: 477px; width: 480px">
<source src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

you can attach an event handler on this arrow key and then change the currentTime property. But prevent the default behaviour before.
const $video = document.querySelector('video');
const handleKeyDown = (event) => {
e.preventDefault();
if (e.keyCode === 39) {
const seconds = $video.currentTime;
$video.currentTime = seconds + 10;
}
}
$video.addEventListener('keydown', handleKeyDown);
<video width="320" height="200">
<source src="your/file.mp4" type="video/mp4">
</video>
<p>Hello</p>

This may help you.
https://www.codespeedy.com/forward-and-backward-html5-video-player-javascript/
You can use event.preventDefault() to prevent default forwarding and set manual forward by adding currentTime + 10 seconds.

How to fade out current video and fade in new video onclick?

I want to be able to play a video when I click a button, then have a different video fade in while fading out the current video when clicking another button. This needs to be a dynamic transition with the user clicking randomly (ie, from 1 to 3 or vice versa). Here's my current code without any fading:
JS:
<script>
video = document.getElementById('video');
source = document.getElementById('source');
window.PlayVideo = function(srcVideo){
video.pause();
source.setAttribute('src', srcVideo);
video.load();
video.play();
}
</script>
HTML:
<a onclick="PlayVideo('fire.webm');"><button>Play Video 1</button></a>
<a onclick="PlayVideo('smoke.webm');"><button>Play Video 2</button></a>
<a onclick="PlayVideo('merged-rain.webm');"><button>Play Video 3</button></a>
<div id="xxxxxx">
<div>
<video id="video" width="520" height="360" loop muted controls><source id = "source"/></video>
</div>
</div>
Example link: http://nov-exl.dx.am/movie%20change.html
Any help would be appreciated, thanks.

How about something like this:
var video = document.getElementById('video');
var source = document.getElementById('source');
var timer = void 0;
window.PlayVideo = async function(srcVideo){
source.setAttribute('src', srcVideo);
fade('out');
try {
await video.pause();
await video.load();
await video.play();
fade('in');
} catch(err) {
console.log("Promise rejected");
}
}
function fade(opts){
if(typeof opacityTimer !== 'undefined') clearInterval(opacityTimer);
var opacity = opts === 'in' ? 0 : 1;
opacityTimer = setInterval(function() {
if ((opts === 'in' && opacity >= 1) ||(opts=== 'out' && opacity <=0) ){
clearInterval(timer);
}
opacity = opts === 'in' ? opacity+(opacity * 0.1 || 0.1) : opacity-(opacity * 0.1 || 0.1);
video.style.opacity = opacity;
video.style.filter = 'alpha(opacity=' + opacity * 100 + ")";
}, 25);
}

Fade out of a Mp3 song using javascript

I'm trying to create a HTML file with some javascript embedded that allows me to press a button and begin to fade out of a song. I've managed to get it working so that it play the song (which is a start). but i've been playing around with a second function to try and get it to reduce the volume and setting a delay on that function can anyone help please ?!
<audio id="myAudio"
<source src="1.mp3"
type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>
<script>
var vol = myAudio.volume;
var timer;
function aud_play() {
var myAudio = document.getElementById("myAudio");
myAudio.play();
}
function aud_fade(){
var myAudio = document.getElementById("myAudio");
if (vol > 0) {
vol = vol - 0.2 ;
}
timer = setTimeout(aud_fade,2);
}
</script>

try this:
function aud_fade() {
var myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0) {
myAudio.volume -= .2;
timer = setTimeout(aud_fade, 200);
}
}

A couple things seem to need addressing ;)
First off, in the example you provided, you have not closed the audio tag.
Second, you are only setting a global vol var and not the volume of the audio object itself.
What you could try is keeping things scoped to the function and use the actual audio object volume rather than a 'global' vol var:
<script>
function aud_play() {
var myAudio = document.getElementById("myAudio");
myAudio.play();
}
function aud_fade(){
var timer,
myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0) {
myAudio.volume -= 0.005;
timer = setTimeout(aud_fade,5);
}
}
</script>
<audio id="myAudio">
<source src="1.mp3" type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>
I have also adjusted the timeout and the volume amount to decrease, as volume is from 0 to 1. Reducing by 0.2 (20 percent) every 2 thousands of a second would 'fade out' in 0.1 of a second!
Here is the above in a Fiddle.
You may want to consider resetting the audio currentTime and volume when the fade completes or when you click play again (Note: There is no stop method, so pause and currentTime can achieve the same thing):
<script>
var fadeTimer = false;
var aud_play = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
myAudio.volume = 1;
myAudio.currentTime = 0;
myAudio.play();
}
var aud_fade = function() {
var myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0.005) {
myAudio.volume -= 0.005;
fadeTimer = setTimeout(aud_fade,5);
} else {
myAudio.volume = 0;
myAudio.pause();
myAudio.currentTime = 0;
}
}
</script>
<audio id="myAudio">
<source src="1.mp3" type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>
Here is the above example in another Fiddle.
Hope this helps!
EDIT:
Regarding Fade In, you could replicate the 'aud_fade' method but increase volume when less than 1 rather than decrease when greater than 0, than call the fade in method on the start method:
var aud_play = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
myAudio.volume = 0; // 0 not 1, so we can fade in
myAudio.currentTime = 0; // set mp3 play positon to the begining
myAudio.play(); // start mp3
aud_fade_in(); // call fade in method
};
var aud_fade_in = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
if (myAudio.volume < 9.995) {
myAudio.volume += 0.005;
fadeTimer = setTimeout(aud_fade_in,10);
} else {
myAudio.volume = 1;
}
};
var aud_fade_out = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0.005) {
myAudio.volume -= 0.005;
fadeTimer = setTimeout(aud_fade_out,5);
} else {
myAudio.volume = 0;
myAudio.pause();
myAudio.currentTime = 0;
}
};
Here is the above in a Fiddle.

html5 video: play/pause custom button issue

I am using an HTML5 Video on my website, with certain other codes that basically makes usability more customized.
The video is intended to play when in view and pause when not in view. Additionally it also has a play and pause button that comes into view when the mouse hovers on the video.
At the end of the video it turns into an image because by default the html5 video would just turn to blank.
The problem is that the image turns up in the end, but the play/pause continue to appear on hover and function as play pause but only audio. You cannot see the video.
I originally wanted it to just show the picture. But would prefer to have the play pause turn into a restart button if the video ends.
I tried looking for something that would fit my existing setup, but I am not sure how to make it happen and which of these codes would I play with.
Here is a link for the site
http://minhasdistillery.com/blumersmoonshine/
<section id="feature">
<div id="trail">
<div id="videocontrol">
<a id="play-pause" class="play"><img src="images/pause.png"/></a>
</div>
<video id="video_background" preload="auto" volume="5"><!--or turn on loop="loop"-->
<source src="videos/video.webm" type="video/webm">
<source src="videos/video.mp4" type="video/mp4">
<source src="videos/video.ogv" type="video/ogg ogv">
</video>
<img id="image_background" src="images/blumer.jpg" width="100%" height="100%" />
</div><!--trail-->
</section><!--feature-->
Javascript that brings up play/pause button
<script>
window.onload = function() {
var video = document.getElementById("video_background");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function() {
if (video.paused == true) {
video.play();
playButton.innerHTML = "<img src='images/pause.png'/>";
} else {
video.pause();
playButton.innerHTML = "<img src='images/play.png'/>";
}
});
}
</script>
The code sets the video to play on when visible and pause otherwise
<script>
//play when video is visible
var videos = document.getElementsByTagName("video"), fraction = 0.8;
function checkScroll() {
for(var i = 0; i < videos.length; i++) {
var video = videos[i];
var x = 0,
y = 0,
w = video.offsetWidth,
h = video.offsetHeight,
r, //right
b, //bottom
visibleX, visibleY, visible,
parent;
parent = video;
while (parent && parent !== document.body) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
r = x + w;
b = y + h;
visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
visible = visibleX * visibleY / (w * h);
if (visible > fraction) {
video.play();
} else {
video.pause();
}
}
}
window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
//check at least once so you don't have to wait for scrolling for the video to start
window.addEventListener('load', checkScroll, false);
checkScroll();
</script>
This one adds the photo in the end.
<script>
var video = document.getElementById('video_background');
var wrapper = document.getElementById('wrapper');
var image = document.getElementById('image_background');
video.addEventListener('ended', function() {
video.style.display = 'none';
image.style.display = 'inline';
}, false);
</script>
A JSBin of the same issue is here
JSBin For Issue
as you will see at the end of the video it will continue to show pause and play and will only play audio.
How do I get it to read that the video ended and switch the button to "replay"

Initially video display style is block and image display style is none.
Video ended event handler sets video display to none and image display to inline.
You can check video display style in button click event handler and toggle it:
playButton.addEventListener(
'click',
function(event) {
if (video.style.display === 'none') {
image.style.display = 'none';
video.style.display = 'block';
}
...
},
false
);
As an alternative add boolean flag which is intially set to false, on video ended event set it to true:
var needReplay = false;
video.addEventListener(
'ended',
function() {
...
needReplay = true;
},
false
);
playButton.addEventListener(
'click',
function(event) {
if (needReplay) {
image.style.display = 'none';
video.style.display = 'block';
needReplay = false;
}
...
},
false
);
Demo

Pausing video if currentTime >= 2

I'd like to pause a video when currentTime is >=2 but I have a problem.
When you click on white div, video changes and I want that video to pause at 2 sec. But as you can see on the fiddle, first video pauses at 2 seconds too and I don't want that. I want my eventhandler function to work only with the second video not the first one.
HTML
<video src="videos/loop.webm" id="video" width="100%" autoplay>
</video>
JS
//This code tracks currentTime
$("#video").on(
"timeupdate",
function(event){
onTrackedVideoFrame(this.currentTime);
});
});
function onTrackedVideoFrame(currentTime){
$("#current").text(currentTime);
}
video.addEventListener("timeupdate", function() {
if (this.currentTime >= 2.000 && this.currentTime <= 8.000) {
this.pause();
}
}, false);
//This code tracks currentTime
//this code changes video source
var videoSource = new Array();
videoSource[0]='videos/loop.webm';
videoSource[1]='videos/fullcut.webm';
var videoCount = videoSource.length;
function videoPlay(videoNum)
{
var video = document.getElementById('video');
video.setAttribute("src",videoSource[videoNum]);
video.load();
video.play();
}
//this code changes video source
Here's the fiddle : http://jsfiddle.net/fKfgp/22/
Thanks for reading!

One way would be to set the timeupdate listener to after you set the new source.
$("#video").on(
"timeupdate",
function(event){
onTrackedVideoFrame(this.currentTime);
});
function onTrackedVideoFrame(currentTime){
$("#current").text(currentTime);
}
var videoSource = new Array();
videoSource[0]='http://www.w3schools.com/html/mov_bbb.mp4';
videoSource[1]='http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4';
var videoCount = videoSource.length;
function videoPlay(videoNum)
{
var video = document.getElementById('video');
video.setAttribute("src",videoSource[videoNum]);
video.load();
video.play();
video.addEventListener("timeupdate", function() {
if (this.currentTime >= 2.000 && this.currentTime <= 8.000){
this.pause();
}
}, false);
}