How to start a HTML 5 video from a particular position? - javascript

<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>

Related

How to change the video source link according to time in HTML video player?

I'm trying to make a video player and it is supposed to change the video source by given time. For ex: At "12 AM" I want to play this video source "video1.mp4" and at "1 AM" I want to play this source "video2.mp4" and at "5 PM" I want to play this "video3.mp4".
I have just started it and I am new to this field so I don't have idea how can I do that, I think we have to write a JS Code?
Can someone let me know how can we do that?
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie2.mp4" type="video/mp4">
<source src="movie3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
This the only code I have written
<video width="320" height="240" controls id="player">
Your browser does not support the video tag.
</video>
var d = new Date(); // get date
var h = d.getHours(); // get hour in 24
var player = document.getElementById('player');
switch (h) {
case 12:
player.src = 'movie.mp4';
break;
case 1:
player.src = 'movie2.mp4';
break;
case 17:
player.src = 'movie3.mp4';
break;
}
change your code:
html:
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" id="source">
Your browser does not support the video tag.
</video>
</body>
</html>
js:
const source=document.getElementById("source");
function change_source(time){
switch(time) {
case '1 AM':
source.setAttribute("src","movie.mp4")
break;
case '2 AM':
source.setAttribute("src","movie2.mp4")
break;
default:
// code block
}
}
good luck

How to preview a video before upload - vanilla JavaScript no third-party libraries

How can I display video before uploading to a server with vanilla JavaScript?
<input type="file" onchange="loadFile(event)">
<video width="320" height="240" controls>
<source id="output" type="video/mp4">
Your browser does not support the video tag.
</video>
JavaScript:
function loadFile(){
// Display chosen file in id "output"
}
const load = (e) => {
let url = URL.createObjectURL(e.files[0])
let video = document.querySelector("#id");
video.setAttribute("src", url)
video.play();
}
<input type="file" onChange="load(this)" />
<video width="320" height="240" controls id="id">
</video>

How to make videos play automatically from many videos using dynamic dom arrays?

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(){..} ?

Detecting end of video with jQuery

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');
}

Using event listening wait for readyState html5 video

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>

Categories