I'm about to try to fully preload a video in HTML5. I use the attribute preload=auto but it does not preload the entire video... In Chrome, the video is only preloaded up to 2% and in Safari around 50%...
Is it possible to force a full preload video with javascript?
function addSourceToVideo(element, src, type) {
var source = document.createElement('source');
source.src = src;
source.type = type;
element.appendChild(source);
}
var video;
$(document).ready(function(){
video = document.getElementsByTagName('video')[0];
addSourceToVideo( video, "http://your-server.com/clip.ogv", "video/ogv");
addSourceToVideo( video, "http://your-server.com/clip.mp4", "video/mp4");
video.addEventListener("progress", progressHandler,false);
});
progressHandler = function(e) {
if( video.duration ) {
var percent = (video.buffered.end(0)/video.duration) * 100;
console.log( percent );
if( percent >= 100 ) {
console.log("loaded!");
}
video.currentTime++;
}
}
<video preload>
<source src="videoURL" type="video/mp4"/>
</video>
Related
i need help with loading multiple videos into HTML 5 web page so that the player can play them in a sequence, is there any way to do that? Thanks
var video = document.getElementById('video');
var media = [
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",];
var vIndex = 0;
function nextVideo() {
vIndex = (vIndex+1)%media.length;
video.src = media[vIndex];
video.currentTime = 0;
video.play();
}
<video id="video" width="400" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" onended="nextVideo()" controls></video>
I am trying to get one of many video files that resides on the server to play on a Web Page using HTML or HTML5. It should run based on whatever filename is passed into the url via an argument. This is the code I have so far, but it does not work.
Example: www.mysite.com?video=myVideo.mp4
So myvideo.mov would reside in the folder on the server. I want the parameter video equal to the video filename.
<!DOCTYPE html>
<html>
<body onLoad="GetVideo()">
<div style="width: 100%; height: 768px; controls Autoplay=autoplay; overflow: hidden;">
<video id="video" width="100%" loop autoplay controls>
<source id="#videoSource" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
</body>
</html>
Expected results would be:
run this URL sample:
www.mysite.com?video=myvideo.mp4
It should play the video file "myvideo.mp4" that resides in the site folder on the server.
Updated sample - This is more what I want it to do - I took recommendations below, but the following DOES NOT WORK. I am trying to get this to work on all browsers:
Example: www.mysite.com?video=myVideo.mp4&folder=myFolder
<!DOCTYPE html>
<html>
<body>
<div style="width:100%;overflow: hidden;">
<video width="100%" controls>
<source src='about:blank' type="video/mp4">
</video>
</div>
<script>
function loadVideo() {
var player = document.querySelector('video');
var base = 'http://ercx.natfas.com/';
var videoFile = getUrlVars()["video"];
var folder = getUrlVars()["folder"];
if (${folder} = "") {
player.src = '${base}${videoFile}';
} else {
player.src = '${base}${folder}/${videoFile}';
}
player.load();
player.play();
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
loadVideo();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body onLoad="GetVideo()">
<div style="width: 100%; height: 768px; controls Autoplay=autoplay; overflow: hidden;">
<video id="video" width="100%" loop autoplay controls>
<source id="videoSource" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
</body>
</html>
Looks like it's achieving what we want to? =)
---
--- Old
You need to set the source correct on the video element, i.e.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
So in your case:
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
Also you're missing a " on the line:
<body onLoad="GetVideo()>
Video File Array
First you need to use MP4, Ogg and/or WebM. Do not use MOV (as mentioned in question). If you got Safari to play a MOV through a <video> tag, it means you have a plugin that facilitates doing so:
Never assume a user has a plugin or assume a user will download and install one if advised to do so.
The majority of the world uses PC not Macs.
Assuming that all videos are in one location (as was stated in question), make an array of their file names:
var files = ['005609.mp4', '005610.mp4', '005612.mp4'];
Next, store your path into a variable:
var base = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/';
Declare an index number and reference the <video> tag:
var index = 0;
var player = document.querySelector('video');
Process the array with .map() and interpolate each element in the array with the base (see function loadVideo() in demo).
If you want to play your files one after another, do not use the [loop] attribute (as indicated in HTML of question). Instead register the <video> tag to the ended event and increment the index (see eventListener at the end of demo).
Also a <div> cannot play videos, therefore [controls] and [autoplay] attributes are unnecessary on a <div> (pertaining to the HTML in question).
Demo
This video player will load automatically (as indicated in the HTML of question).
var player = document.querySelector('video');
var base = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/';
var files = ['005609.mp4', '005610.mp4', '005612.mp4'];
var index = 0;
function loadVideo(host, array, index) {
var urls = array.map(function(vid, idx) {
return `${host}${vid}`;
});
player.src = urls[index];
player.load();
player.play();
}
player.addEventListener('ended', function(e) {
if (index >= files.length) {
index = 0;
loadVideo(base, files, index);
} else {
loadVideo(base, files, index);
}
index++;
});
loadVideo(base, files, index);
<!DOCTYPE html>
<html>
<body>
<div style="width:480px;overflow: hidden;">
<video width="100%" controls>
<source src='about:blank' type="video/mp4">
</video>
</div>
</body>
</html>
Answer from Tibbelit as the closest to working. It doesn't work on Chrome but it seems to work on other browsers.
<!DOCTYPE html>
<html>
<body onLoad="GetVideo()">
<div style="width: 100%; height: 768px; controls Autoplay=autoplay; overflow: hidden;">
<video id="video" width="100%" loop autoplay controls>
<source id="videoSource" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
</body>
</html>
I would like to ask why can't I run two different source of video which is .ogg and .mp4 files in this canvas. I am trying to override this green screen video to another video that had it's background colour hidden.
<html>
<head>
<script type = "text/javascript">
function load() {
var get1 = document.getElementById("c1");
var set1 = get1.getContext("2d");
var get2 = document.getElementById("c2");
var set2 = get2.getContext("2d");
var video1 = document.getElementById("video1");
var video2 = document.getElementById("video2");
video1.addEventListener('play', function(){runVideo();});
video2.addEventListener('play', function(){runVideo2();});
var runVideo1 = function() {
if(video1.paused || video1.ended) {
return;
}
var frameconversion = function() {
if(window.requestAnimationFrame) {
requestAnimationFrame(runVideo1);
} else {
setTimeout(runVideo,0);
}
};
};
var runVideo2 = function() {
if(video2.paused || video2.ended) {
return;
}
var frameconversion2 = function() {
if(window.requestAnimationFrame) {
requestAnimationFrame(runVideo2);
} else {
setTimeout(runVideo2,0);
}
}
}
}
</script>
</head>
<body onload="load()" style="background:grey">
<video id = "video1" controls="true">
<source src = "video.ogg" />
</video>
<video id = "video2" controls="true">
<source src = "Helicopter Bell Fly By with Sound on green screen - free green screen 6.mp4" />
</video>
<canvas id = "c1" width="500" height="300"></canvas>
<canvas id = "c2" width="500" height="300"></canvas>
</body>
</html>
This article on Metia shows a working HTML5 example of green-screen (chroma key) video in a canvas. As you can see, it allows you two change the background to a selection of static images and video sources.
I have 2 videos. Each 7 seconds long. I need the top video to fadeout after it is halfway done playing, revealing the bottom video for 3.5 seconds, then fading back in, in an infinite loop.
I am unable to get the video to fade and not sure how to make it start at a specific time. This is what I have:
JS
<script type="text/javascript">
video.addEventListener('ended', function () {
$('#vid').addClass('hide');
$('video').delay(100).fadeOut();
}, false);
video.play();
var vid1=document.getElementById("video-loop");
vid1.addEventListener(function () {
$('video').delay(100);
}, false);
vid1.play();
</script>
HTML
<div id="#video">
<video id="vid" autoplay preload="auto">
<source src="videos/interactive2_3.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
<video id="video-loop" preload="auto" loop>
<source src="videos/interactive2-loop.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
to track the time in the video and make decisions based on that, you'll want to track the timeupdate event on the video, and then use the currentTime property to decide what to do.
This fragment will allow you to swap one video out at the 2.5s mark, play the second for 3.5s then swap back to the first ... you can elaborate based on the timer events to make it more flexible for your scenario...
<script>
var showing = 1 // which of the two videos are showing at the moment
var video1 = document.getElementById('vid');
var video2 = document.getElementById('video-loop');
video1.addEventListener('timeupdate',function(e){
if ((showing == 1) && (video1.currentTime > 2.5)) {
showing=2
video1.pause()
$('#vid').delay(100).fadeOut();
$('#video-loop').delay(100).fadeIn();
video2.play()
}
});
video2.addEventListener('timeupdate',function(e){
if ((showing == 2) && (video2.currentTime > 3.5)) {
video2.pause()
$('#video-loop').delay(100).fadeOut();
$('#vid').delay(100).fadeIn();
video1.play()
}
});
</script>
<div>Iteration: <span id="iteration"></span></div>
<video id="video-background" autoplay="" muted="" controls>
<source src="https://res.cloudinary.com/video/upload/ac_none,q_60/bgvid.mp4" type="video/mp4">
</video><div>Iteration: <span id="iteration"></span></div>
var iterations = 1;
var flag = false;
document.getElementById('iteration').innerText = iterations;
var myVideo = document.getElementById('video-background');
myVideo.addEventListener('ended', function () {
alert('end');
if (iterations < 2) {
this.currentTime = 0;
this.play();
iterations ++;
document.getElementById('iteration').innerText = iterations;
} else {
flag = true;
this.play();
}
}, false);
myVideo.addEventListener('timeupdate', function () {
if (flag == true) {
console.log(this.currentTime);
if (this.currentTime > 5.5) {
console.log(this.currentTime);
this.pause();
}
}
}, false);
// Please note that loop attribute should not be there in video element in order for the 'ended' event to work in ie and firefox
I'm working on an sandbox experiment using html5 video and am wondering how I can get the poster image to display after again once the end user hovers off the video?
I have the video setup so that if you hover over the video can auto play and if you hover off it stops. I would like it to return back to poster image.
Javascript
<script>
document.addEventListener('mouseover',hoverVideo,false);
var vid = document.getElementById('vid1');
function hoverVideo(a)
{
if(a.target == vid)
{
vid.play();
this.addEventListener('mouseout',hideVideo,false);
}
}
function hideVideo(e)
{
if(e.target == vid)
{
vid.pause();
}
}
</script>
HTML5
<video id="vid1" width="1000" height="418"
poster="poster.png" loop="true" preload="auto"
controls class="video-js vjs-default-skin">
<source src="my_video.mp4" type='video/mp4' >
<source src="my_video.webm" type='video/webm' />
<source src="my_video.ogv" type='video/ogg' />
</video>
Try this (you'll need to include jQuery)
function hideVideo(e)
{
if(e.target == vid)
{
vid.pause();
var poster = $(vid).attr("poster");
$(vid).attr("poster", "");
$(vid).attr("poster", poster);
}
}