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.
Related
I have 3 link blocks and I would like, if a user clicks on two of them, to mute one of the songs.
I am unfortunately a bit novice with jQuery/Javascript, but here is the code I have right, now, which doesn't work:
<script type="text/javascript">
var isPlaying=false
$(document).ready(function(){
$('.play').click(function(){
var audioID = "sound" + $(this).attr('id');
var $this = $(this);
var music = new Audio(audio);
if (!isPlaying) {
// Not playing, let's play
isPlaying = true;
music.play();
} else {
// Stop the music
isPlaying = true;
music.pause();
};
});
});
</script>
<audio loop id="sound1" src="3.mp3"> </audio>
<audio loop id="sound2" src="2.mp3"> </audio>
<audio loop id="sound3" src="3.mp3"> </audio>
I do have another code that plays the three songs assigned to its link blocks, but they overlap.
$('.play').click(function(){
var $this = $(this);
// starting audio
var audioID = "sound" + $(this).attr('id');
$this.toggleClass('active');
if($this.hasClass('active')){
$("#" + audioID).trigger('play');
} else {
$("#" + audioID).trigger('pause');
}
Any help, or pointers in the right direction, are more than appreciated!
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'm trying to do something like this.
But I don't know why I'm not getting this thing work.
Here it is the codepen example:
$('input').on('change', function(e) {
var file = e.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function(e) {
$('audio source').attr('src', e.target.result);
}
reader.readAsDataURL(file);
});
The source tag is receiving the base64 mp3 file, but it doesn't load the file into browser.
You set the src attr directly on the audio element. fiddle
var $audio = $('#myAudio');
$('input').on('change', function(e) {
var target = e.currentTarget;
var file = target.files[0];
var reader = new FileReader();
console.log($audio[0]);
if (target.files && file) {
var reader = new FileReader();
reader.onload = function (e) {
$audio.attr('src', e.target.result);
$audio.play();
}
reader.readAsDataURL(file);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file">
<audio controls id="myAudio" autoplay></audio>
<audio controls>
<source src="yoraudio.ogg" type="audio/ogg">
<source src="youraudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
For more help visit
This is the simplest way to play audio
In UWP you can play a file directly that you can get by name from the Music Library as shown below. Just get permission to access the Music Library by checking the library in the "Capabilities" tag of your project properties.
picksinglefile();
var l = Windows.Storage.KnownFolders.musicLibrary;
var f = localStorage.getItem("alarmname").toString();
l.getFileAsync(f).then(function (file) {
// storagefile file is available
var s = window.URL.createObjectURL(file); // its a storage file, so create URL
player1.setAttribute("src", s);
player1.play(); // if autoplay is false or off
});
function picksinglefile() {
// Create the picker object and set options
var fop = new Windows.Storage.Pickers.FileOpenPicker();
fop.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.musicLibrary;
fop.fileTypeFilter.replaceAll([".mp3", ".wav"]);
fop.pickSingleFileAsync().then(function (file) {
if (file) {
localStorage.setItem("alarmname", file.name.toString());
} else {
alert("Operation Cancelled");
}
});
I am using the YouTube API as the following:
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
playerVars: { 'modestbranding': 1, 'showinfo' : 0, 'controls': 0 },
videoId: 'M7lc1UVf-VE'
});
}
</script>
I have a div that is named player on my html.
I need the video to not have the controls (controls=0). The problem is whenever I remove the controls instead of them there is a black bar. Instead of that black bar replacing the controls, I want the video to expand and take the whole video's height&width.
Am I missing anything here? Thanks for any light on that matter.
Try to add this in your 'playerVars' :
'autoplay' : 0
It seems that the video dimensions doesn't match the values of your variables.
This looks better (e.g. height: '360'):
<html>
<head>
<title>YT - Test</title>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '360',
width: '640',
playerVars: { 'modestbranding': 1, 'showinfo' : 0, 'controls': 0 },
videoId: 'M7lc1UVf-VE'
});
}
</script>
</head>
<body>
<div id="ytplayer"></div>
</body>
</html>
Please see https://developers.google.com/youtube/youtube_player_demo
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>