Menu
I've been trying to set up a website that plays a random .webm that loops, then when you press a key, it plays the next random .webm. I got the random part down, but I can't seem to figure out how to get it to wait for the keystroke. Another issue I'm having is that I can't figure out how to get it to load a random .webm when the site is first visited. It just plays the first video (1.webm) I'm sorry if this is a bad question, I'm very new to web development.
I tried to make it so that when the key is pressed it would load a new .webm, but it didn't work.
Here's what I have: HTML:
<!DOCTYPE html>
<html>
<head>
<title>webm haha</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<video controls loop id="video1" src="data/1.webm" autoplay></video>
<script type="text/javascript" src="lib/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="lib/dat.gui.min.js"></script>
<script type="text/javascript" src="app_nue.js"></script>
</body>
</html>
JS:
var pGetRand;
var getRand;
//Settings
var settings = {
changeThresh : 0.1,
totalClips : 7,
pathToClips : "data/",
pbRate : 1,
mode : 'non-repeating-rand',
}
//Storage
var video1 = $('#video1');
var video2 = $('#video2');
var v1d,v2d,v1ct,v2ct;
var linearTracker = 1;
var gate1 = true;
var gate2 = false;
function toggle(element, pElement){
//start playing before the clip comes to the front.
element.get(0).play();
setTimeout(function(){
element.css('z-index', '500');
pElement.css('z-index', '0');
if(settings.mode == 'random'){
getRand = Math.floor( Math.random() * settings.totalClips +1 )
}
if(settings.mode == 'linear'){
if(linearTracker >= settings.totalClips){
linearTracker = 1;
}else{
linearTracker ++
}
getRand = linearTracker
console.log(linearTracker);
}
if(settings.mode == 'non-repeating-rand'){
getRand = Math.floor( Math.random() * settings.totalClips +1 )
while(getRand == pGetRand){ //are we the same, if so try again until we are not.
console.log("try again",getRand,pGetRand);
getRand = Math.floor( Math.random() * settings.totalClips +1 )
}
pGetRand = getRand
}
pElement.attr({ 'src': settings.pathToClips + getRand + '.webm' });
pElement.get(0).pause();
}, 150)
}
786
First off, you can use window.addEventListener to run a function on a keypress. The parameter key here has a property that says the id number of the key pressed. You can change that number to change what key needs to be pressed to change the video. You can read more on it here
window.addEventListener('keypress', function(key) {
//32 is the space key, use console.log(key.which)
to figure out the id for the key you want to use
if (key.which == 32) {
toggle();
}
});
In the overall function, you should be changing only the src of the video instead of hiding and showing a whole new element. At the begginning of the function, you would simply add this:
var element = document.getElementById("video1");
var vid = '1';//Backup
And at the end of the toggle function you would reset the time and change the src:
element.play();
element.currentTime = 0;
element.setAttribute('src', settings.pathToClips+vid+'.webm');
For your random function, you probably won't want the last video played to be repeated, so you should use filter to check if the new video id is the same as the last video played.
You can learn more about filter here
if (settings.mode == 'random') {
function getNewNumber() {
var lastVid = usedVids[usedVids.length-1];
if (lastVid == undefined || isNaN(lastVid)) {
lastVid = settings.totalClips+1;
//Makes sure there is no way the new vid could be the same
}
var vidNum = Math.floor(Math.random() * settings.totalClips) + 1;
var isUsed = usedVids.filter(a => a == vidNum);
//This makes sure that the video isn't the same as the last video (It helps make it seem more random)
if (isUsed[0] != lastVid) {
vid = vidNum;
usedVids = [vidNum];
}
else {
getNewNumber();
}
}
getNewNumber();
}
For linear, you just increase the variable for what vid you're on and set the video number to that.
if (settings.mode == 'linear') {
currentVidNum++;
if (currentVidNum > settings.totalClips) {
//This resets currentVidNum once it is at the max vids
currentVidNum = 1;
}
vid = currentVidNum;
}
Non-repeating-random is a bit trickier, but you can pull it off with a similar technique as random, except you don't remove all the values from the array of what you've played every time you update the video:
if (settings.mode == 'non-repeating-rand') {
var wasReset = false;
if (usedVids.length >= settings.totalClips) {
//This resets usedVids while still keeping the last video used so it won't play it again
var lastVid = usedVids[usedVids.length-1];
wasReset = true;
usedVids = [lastVid];
}
function getNewNumber() {
var newVidNum = Math.floor(Math.random() * settings.totalClips) + 1;
var isUsed = usedVids.filter(a => a == newVidNum);
if (isUsed[0] != newVidNum) {
if (wasReset == true) {
usedVids = [];
}
usedVids.push(newVidNum);
vid = newVidNum;
}
else {
getNewNumber();
}
}
getNewNumber();
}
To fix your problem of it not automatically setting a random video, you just need to call the toggle function at the end of the script.
I don't know if this was a good enough explanation so if it helps here's a snippet of the full code: (Although it won't work unless you have the videos :/)
window.addEventListener('keydown', function(key) {
if (key.which == 32) {
toggleVid();
}
});
//Settings
var settings = {
changeThresh: 0.1,
totalClips: 6,
pathToClips: "data/",
pbRate: 1,
mode: 'non-repeating-rand',
}
var currentVidNum = 1;
var usedVids = []; //Used for non-repeating-rand and random
function toggleVid() {
var element = document.getElementById("video1");
var vid = '1'; //Backup
if (settings.mode == 'random') {
function getNewNumber() {
var lastVid = usedVids[usedVids.length - 1];
if (lastVid == undefined || isNaN(lastVid)) {
lastVid = settings.totalClips + 1;
//Makes sure there is no way the new vid could be the same
}
var vidNum = Math.floor(Math.random() * settings.totalClips) + 1;
var isUsed = usedVids.filter(a => a == vidNum);
//This makes sure that the video isn't the same as the last video (It helps make it seem more random)
if (isUsed[0] != lastVid) {
vid = vidNum;
usedVids = [vidNum];
} else {
getNewNumber();
}
}
getNewNumber();
}
if (settings.mode == 'linear') {
currentVidNum++;
if (currentVidNum > settings.totalClips) {
currentVidNum = 1;
}
vid = currentVidNum;
}
if (settings.mode == 'non-repeating-rand') {
var wasReset = false;
if (usedVids.length >= settings.totalClips) {
var lastVid = usedVids[usedVids.length - 1];
wasReset = true;
usedVids = [lastVid];
}
function getNewNumber() {
var newVidNum = Math.floor(Math.random() * settings.totalClips) + 1;
var isUsed = usedVids.filter(a => a == newVidNum);
if (isUsed[0] != newVidNum) {
if (wasReset == true) {
usedVids = [];
}
usedVids.push(newVidNum);
vid = newVidNum;
} else {
getNewNumber();
}
}
getNewNumber();
}
element.play();
element.currentTime = 0;
element.setAttribute('src', settings.pathToClips + vid + '.webm');
}<video controls loop id="video1" src="data/1.webm" autoplay='true'></video>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
