I have three videos that I am trying to detect when they end, and then navigate to another page.
The function seems to only work for the first video $vid1 and nothing happens to the $vid2 and $vid3 videos.
I came across this question, and sourced my code from there.
(I noticed in a comment that it stated that the 'correct' answer doesn't work in chrome)
How would I go about making this work for all videos?
JS
//variables
var $vid1 = document.getElementById("vid1");
var $vid2 = document.getElementById("vid2");
var $vid3 = document.getElementById("vid3");
//functions
function Redirect1() {
window.location.replace('ExamplePage1');
}
function Redirect2() {
window.location.replace('ExamplePage2');
}
function Redirect3() {
window.location.replace('ExamplePage3');
}
//events
$vid1.addEventListener("ended", Redirect1, false);
$vid2.addEventListener("ended", Redirect2, false);
$vid3.addEventListener("ended", Redirect3, false);
HTML
<div class="videoResult vidOne">
<video id="vid1" controls>
<source src="#" type="video/mp4">
</video>
</div>
<div class="videoResult vidTwo">
<video id="vid2" controls>
<source src="#" type="video/mp4">
</video>
</div>
<div class="videoResult vidThree">
<video id="vid3" controls>
<source src="#" type="video/mp4">
</video>
</div>
May be, try this?
//functions
function Redirect1() {
window.location.replace('./ExamplePage1');
}
function Redirect2() {
window.location.replace('./ExamplePage2');
}
function Redirect2() {
window.location.replace('./ExamplePage3');
}
Related
How to make videos play automatically from many videos using dynamic dom arrays?
At the moment I am still using the html video element manually instead of the javascript array.
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
var video3 = document.getElementById('video3');
var imagen1 = document.getElementById('imagen1');
function imgTransition(){
imagen1.style.opacity=0;
video1.play();
video1.style.opacity=1;
}
video1.onended = function(){
video2.play();
video1.style.opacity=0;
video2.style.opacity=1;
}
video2.onended = function(){
video3.play();
video2.style.opacity=0;
video3.style.opacity=1;
}
video3.onended = function(){
video3.style.opacity=0;
imagen1.style.opacity=1;
window.setTimeout(imgTransition, 5000);
}
*{padding:0;margin:0}video{width:100%;height:100%;position:absolute;object-fit:cover;transition:all 1.2s linear;z-index:-10}.video1{opacity:1}.video2{opacity:0}.video3{opacity:0}.imagenes{opacity:0;transition:opacity 2s;width:100%;height:100%;position:absolute;object-fit:cover;z-index:-10}.container{width:100%;height:100%}
<div class="container">
<video autoplay id="video1" class="video1">
<source src="http://thenewcode.com/assets/videos/ocean-small.mp4" type="video/mp4">
</video>
<video id="video2" class="video2">
<source src="https://hunzaboy.github.io/Ckin-Video-Player/ckin.mp4" type="video/mp4">
</video>
<video id="video3" class="video3">
<source src="https://www.cssscript.com/demo/vanilla-js-custom-html5-video-player-pureplayer/360.mp4" type="video/mp4">
</video>
<img src="transition.gif" class="imagenes" id="imagen1">
</div>
How to make videos play automatically from many videos using dynamic dom arrays?
How to dynamic the function:
video.onended = function(){..} ?
Before i start, i'm sorry if i belong is repost. But, i still not get the answer after check the previous thread.
i try to change source of video with onclick button. But, the video still same although the source has changed.
<video width="560" height="320" controls="controls" preload="none">
<source id="myVideo" src="/video1.mp4" type="video/mp4">
<track id="mySubtitle" src="/Subtitle1.srt" kind="subtitles" srclang="id" label="Indonesian" default>
</video>
<button onclick="myFunction1()">Change Video 1</button>
<button onclick="myFunction2()">Change Video 2</button>
<script>
function myFunction1() {
document.getElementById("myVideo").src = "/video2.mp4";
document.getElementById("mySubtitle").src = "/Subtitle2.srt";
}
function myFunction2() {
document.getElementById("myVideo").src = "/video3.mp4";
document.getElementById("mySubtitle").src = "/Subtitle3.srt";
}
</script>
The source has success changed, but video still same.
Anyone have an idea?
Try this:
<script>
function myFunction1() {
document.getElementById("myVideo").setAttribute("src", "/video2.mp4");//Set src attribute
document.getElementById("mySubtitle").setAttribute("src", "/Subtitle2.srt");//Here too
}
function myFunction2() {
document.getElementById("myVideo").setAttribute("src", "/video3.mp4");//And here
document.getElementById("mySubtitle").setAttribute("src", "/Subtitle3.srt");//Same
}
</script>
This should work perfectly.
When you change the src of the <source> element, it doesn't change the src of the <video> element. You have to call its load method :
function myFunction1() {
document.getElementById("myVideo").src = "http://media.w3.org/2010/05/bunny/movie.mp4";
// document.getElementById("mySubtitle").src = "/Subtitle2.srt";
document.querySelector('video').load();
}
<button onclick="myFunction1()">Change Video 1</button>
<video width="560" height="320" controls="controls" preload="none">
<source id="myVideo" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<!--<track id="mySubtitle" src="/Subtitle1.srt" kind="subtitles" srclang="id" label="Indonesian" default>-->
</video>
I have this function and I would like to know how to make this work with jQuery.
My HTML:
<video id="mainVideo" width=320 height=240 autoplay>
</video>
<br/>
<video class="thumbnail" width=100 height=100>
<source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
</video>
<video class="thumbnail" width=100 height=100>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
This is the function:
var videos = document.querySelectorAll(".videoThumbnail");
for(var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', clickHandler, false);
}
function clickHandler(e) {
var mainVideo = document.getElementById("mainVideo");
mainVideo.src = e.srcElement.currentSrc;
}
This is my solution, in the future post your HTML code for helping us to solve the problem:
$(function(){
$('.thumbnail').click(function(){
$('#mainVideo').replaceWith('<video id="mainVideo" width=320 height=240 autoplay></video>');
$('#mainVideo').html($(this).html());
});
});
Here is the fiddle
The code already works with jQuery, so there is no conversion necessary to make it functional.
That said, here is a more typical way to do this with jQuery:
var mainVideo = $("#mainVideo");
$(".videoThumbnail").click(function() {
mainVideo.prop("src", this.srcElement.currentSrc);
});
Here is my javascript on loading of video.
var vid = $("#video");
$("#video").on("load",function() {
if ( vid[0].ReadyState === 4 ) {
console.log("loaded video!");
console.log(vid);
vid.fadeIn();
}
});
I want to play my video everytime the video div refreshes after .load() runs. How do i loop this until readyState == 4? I tried using on("canplaythrough") but this is never recognized as a function...
Make sure you set preload="auto" (and don't use autoplay) in the tag, then you can use the canplay event:
var vid = $("#video");
vid.on("canplay", function() {
vid[0].play();
vid.fadeIn(1000);
});
$("#change").on("click", function() {
vid.hide();
vid[0].src = "http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" width="500" height="280" preload="auto" style="display:none">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="change">Change source (mp4 only for this example)</button>
<video width="320" height="240" controls>
<source src="Video.mp4#t=03,20" type="video/mp4">
Your browser does not support the video tag.
</video>
The videos starts from 3 minutes 20 seconds in my code. I want to play video from beginning after setting #t=03,20 in html5. How can I do this?
<video id="vid1" width="320" height="240" controls loop>
<source src="Video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
You have to wait until the browser knows the duration of the video before you can seek to a particular time.
<script>
window.onload=function(){
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 200;
}, false );
};
</script>
OR
function restart1()
{ var video1 = document.getElementById("vid1");
video1.currentTime = 0;
}
<video id="vid1" width="320" height="240" onclick="restart1();" controls>
<source src="Videos.mp4#t=03,61" type="video/mp4">
Your browser does not support the video tag.
</video>