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>
Related
I have a video with autoplay on my website http://vakuutustiedot.fi/arkhaltia/ and it works perfectly on Mozilla but not working in Chrome. The video stopped instantly when the page was loaded and it never played until you refresh the page(at least 2 times).
<div class="homepage-hero-module">
<div class="video-container">
<video id="vid" autoplay loop class="fillWidth">
<source src="video/video1.mp4" type="video/mp4" />
<source src="video/video1.webm" type="video/webm" />
</video>
<div class="poster hidden">
<img src="images/smoke.jpg" alt="">
</div>
<script>
$('#vid')[0].play()
</script>
</div>
</div>
JS:
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
// console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
Actually I have noticed that if go through link it works immediately but if you refresh it's not working again. Who knows what's the problem?
It may be that you need to add the 'muted' attribute to allow it autoplay - see this example:
The snippet below plays in chrome, for example, if you want a reference:
<video autoplay muted poster="path to video" id="bgvid">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
I want to autoplay an HTML5 video after opening it on fancybox3.
here's my codepen:
https://codepen.io/ableslayer/pen/aygGQX
and my code:
$(document).ready(function() {
$("[data-fancybox]").fancybox({
afterShow: function() {
// After the show-slide-animation has ended - play the vide in the current slide
this.content.find('video').trigger('play')
// Attach the ended callback to trigger the fancybox.next() once the video has ended.
this.content.find('video').on('ended', function() {
$.fancybox.next();
});
}
});
});
Give your video a id (myVideo) and add this line in afterShow function
var vid = document.getElementById("myVideo");
vid.play();
Javascript
$(document).ready(function() {
$("[data-fancybox]").fancybox({
afterShow: function() {
// After the show-slide-animation has ended - play the vide in the current slide
var vid = document.getElementById("myVideo");
vid.play();
// Attach the ended callback to trigger the fancybox.next() once the video has ended.
this.content.find('video').on('ended', function() {
$.fancybox.next();
});
}
});
});
HTML
<a data-fancybox data-src="#one" class="fancybox">link</a>
<div id="one" style="display:none">
<video id='myVideo' width="400" controls autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<script type="text/javascript">
function random_playlist(){
var myrandom=Math.round(Math.random()*4);
var soundurl='http://dummy.xy/dummy.mp3';
if (myrandom==0){soundurl='http://path_to.mp3';}
else if (myrandom==1){soundurl='http://path_to.mp3';}
else if (myrandom==2){soundurl='http://path_to.mp3';}
else if (myrandom==3){soundurl='http://path_to.mp3';}
else if (myrandom==4){soundurl='http://path_to.mp3';}
console.log(soundurl);
return soundurl;
};
</script>
<audio id="audioplayer_id" controls="controls" loop>
<source id="source_id" src="" type="audio/mp3"/>
Your browser does not support the audio element
</audio>
<script type="text/javascript">
var audioload = random_playlist();
console.log(audioload);
document.getElementById('source_id').src= audioload;
var audioplayer_id = document.getElementById('audioplayer_id')
audioplayer_id.volume = 0.15;
audioplayer_id.load();
audioplayer_id.play();
</script>
Works well for me but can it be optimized or is this OK ?
I just hacked this together from various sources seems like html5 didnt integrate a playlist function in the audio tag, which seems funny to me.
greets
You could shorted the random_playlist function like this:
function random_playlist(){
var PATHS = ['http://path_to.mp3', 'http://path_to.mp3', 'http://path_to.mp3'];
return PATHS[Math.floor(Math.random() * PATHS.length)];
}
or (a better but more complicated version):
var random_playlist = (function(){
var PATHS = ['http://path_to.mp3', 'http://path_to.mp3', 'http://path_to.mp3'];
return function(){
return PATHS[Math.floor(Math.random() * PATHS.length)]
};
}())
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