I'm busy with a webdoc that I'm partially creating on hype, the video are hosted on vimeo (so I need to use the vimeo api for some tasks like seekto) but my difficulties should be limited to js.
the objective is to display a given image at a given time interval of the video.
With my code below, I do get the string "test", "success" and "confirmed success" at the right time in my div id=popimgbox, and I can seek back and forth in the video and still get the right "answear", if I may say so.
Now, I have images that are all stored in the same folder, and all named popimgX.jpg, with X being a number.
I want
to store the URLs of my images in a variable let's say "popimgurl"
that my variable is updated (by a function???) in order to contain the URL of a given immage for a given interval of time of the video
to still be able seekto back and forth in the video and get the right URL at the right time
To do so I created a function increment, and a pair of variable. With the code below, my popimgurl variable is indeed updated once the video reach 3 seconds, but it do not increment only once... untill the video reach 6 seconds, when I want to update my popimgurl variable once again.
I tried to use for with js break and js closure but did not manage for some understandable reasons after thought;
I did quite some try with switch, but I'm stuck with the fact that the case must be string or single numerical value, not numerical interval or comparaison.
thank's in advance for your help :-)
var iframe = $('#vplayer_1')[0];
var player = $f(iframe);
var status = $('.status');
fired = 0;
//my try to sync increment
var dia = (function () {
var n = 0;
return function increment() {return n += 1;}
})();
function dian(){
popimgurl = '${resourcesFolderName}/popimg'+ dia() +'.jpg';
popimgloader = '<img src ="' + popimgurl + '">';
}
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause(id) {
status.text('paused');
}
function onFinish(id) {
status.text('finished');
}
function onPlayProgress(data, id) {
status.text(data.seconds + 's played');
//my chapters, when I want the img to change within popimgbox
if (data.seconds >= 1) {
popimgbox.innerHTML = "test";
}
if (data.seconds >= 3) {
// popimgbox.style.display = "success"
dian();
popimgbox.innerHTML = popimgurl;
}
if (data.seconds >= 6) {
// popimgbox.style.display = "confirmed success"
dian();
popimgbox.innerHTML = popimgurl;
}
}
PS1: disclamer, I'm a beginer coder, i do my best so excuse my french if my question isn't well formulated or if the answer is somewhere but I was unable to see/understand it
PS2 : i did quite a try with popcornjs, but not way to make it work with vimeoapi and within hype, quite frustrated ;-)
PS3: as this is my first post I would like to thank's you all for the great support available here; I owe you most ;-)
Finally I'll answer myself.
It's a solution that only stand for vimeo, as this is what I use to host my videos, but very little changes have to be done to work with the html5 <video> tag as well.
First you need to define your variables and your intervals:
var intervals =[11.56, 44.08, 115, 125, 127.92, 177.72];
var index;
Then you need to add an event listener timeupdate that return the elapsed time , filter intrevals according to the elapsed time data.seconds or seconds and define the value of index as the indexOf the last entry of your filtered array intervals
player.on('timeupdate', function(data) {
seconds = data.seconds;
index = intervals.indexOf(intervals.filter(function(nb) {
return seconds < nb;
})[0]);
if (diaIndex == -1) {
// do something if seconds > the higher value of your last interval
}
And that's it !
Now for
seconds = [0, 11.56[ --> index = 0
seconds = [11.56, 44.08[ --> index = 1
seconds = [44.08, 115[ --> index = 2
and so on
Now we can use index as a variable for instance to display a given image :
var imgNum = 0;
function diaplayImg(index) {
if(index === imgNum) {
return;
// this will avoid that the same image is releaded on every timeupdate events
}
else {
imgNum =+ index
document.getElementById('myImageWraper').innerHTML = "<img src='img" + imgNum+ ".png'>"
};
}
Don't forget, you need to call the function displayImage() in your timeupdate event listener, it will then be fired every ±250ms but the image won't be reloaded each time
PS : vimeo has realeased its new api between my question and my answer so the question use the old api while the answer use the new one
Related
I'm a bit rusty with jQuery, but I created a slideshow a couple years ago and I plugged it into a new website I'm building right now and I'm having issues.
The main issue I'm having is I got the background image in the code below to run through the slider correctly, but when I go to run the 'artist_name' data through the same slider code it doesn't loop correctly.
$(document).ready(function() {
// Initial pull in of the projects feature
$.getJSON("index.php/Home/pull_sponsored_videos", function(data) {
// Sets global variables for returned json data
window.$artist_name = data.artist_name;
window.$song_title = data.song_title;
window.$video_uri = data.video_uri;
window.$cover_photo = data.cover_photo;
// Turns returned json data into an array
window.$cover_photo_array = $.map(window.$cover_photo, function(el) { return el; });
window.$artist_name_array = $.map(window.$artist_name, function(el) { return el; });
// Cover Photo Iteration Start
var print_next_sponsored_video_picture_value_index = 0;
var print_next_sponsored_video_picture_value_x;
function print_next_sponsored_video_picture_value() {
$('.sponsored_videos_slider').css('background-image','url('+window.$cover_photo_array[print_next_sponsored_video_picture_value_index]+')');
// Test console
console.log(window.$cover_photo_array[print_next_sponsored_video_picture_value_index])
print_next_sponsored_video_picture_value_index= (print_next_sponsored_video_picture_value_index + 1) % window.$cover_photo_array.length;
}
print_next_sponsored_video_picture_value();
print_next_sponsored_video_picture_value_x = setInterval(print_next_sponsored_video_picture_value, 5000);
// Cover Photo Iteration End
// Artist Name Iteration Start
var print_next_sponsored_video_artist_name_value_index = 0;
var print_next_sponsored_video_artist_name_value_x;
function print_next_sponsored_video_artist_name_value() {
$('.artist_name').text(window.$artist_name[print_next_sponsored_video_artist_name_value_index]);
// Test console
console.log(window.$artist_name[print_next_sponsored_video_artist_name_value_index]);
print_next_sponsored_video_artist_name_value_index= (print_next_sponsored_video_artist_name_value_index + 1) % window.$artist_name.length;
}
print_next_sponsored_video_artist_name_value();
print_next_sponsored_video_artist_name_value_x = setInterval(print_next_sponsored_video_artist_name_value(), 5000);
// Artist Name Iteration End
});
});
In the picture below the 'assets/images/sosagold_pornoflick_coverphoto.png' and 'assets/images/kodakblack_skrilla.png' outputs every time the slideshow changes image, but the output that reads....
Sosa Gold Ft. Ca$H
Kodak Black
... outputs one time to the console, and does not output to the slideshow accordingly, and the last value outputted Kodak Black is what's appended in the jQuery code.
So my question is am I missing anything? Because I've hit a standstill trying to figure out what I am doing wrong.
Suppose I have the following code:
var blinker = function(element){
if(stopped){
return;
} else {
var sampleMapping = {'0': 'bass.wav',
'1': 'clap(2).wav',
'2': 'hihat(4).wav',
'3': 'tom(9).wav',
'4': 'hihat.wav',
'5': 'ArpEC1.wav'}
if (element.attr('value') === 'hit'){
var sample = element.attr('id');
instrument(sample);
}
element.fadeOut(200);
element.fadeIn(200);
}
}
var sequencerRun = function(){
var currentTime = 0;
var starting = 200;
var startTime = 0;
for(var k = 0; k < 16; k++){
$(".instrument td .beat" + k).each(function(){
setTimeout(blinker, currentTime,$(this));
})
currentTime += starting;
}
}
var timerId, setInt;
var runSeq = function(){
setInt = setInterval(sequencerRun,3200);
}
$('.play').click(function(){
stopped = false
sequencerRun();
runSeq();
})
$('.stop').click(function(){
clearInterval(setInt);
stopped = true;
})
I have writting code to carry out a sequencer run in my drum machine. A deployed version of my app can be seen here
So what I have done is created a matrix using a table HTML structure. When play is clicked sequencerRun is invoked and runs once. After this first run setInterval takes care invoking all sequencerRun until a user clicks stop. There is a flag within these click event listeners which I will come back to.
The heart of this sequencing is with sequencerRun. For each column in my matrix, which corresponds to a beat, I am scheduling a check on that column to see if any element has been selected for future play. sequencerRun only takes care of scheduling. More explicitly:
setTimeout(blinker,0, $(this)) is the same as check the first column right away
setTimeout(blinker,0, $(this)) is the same as check the second column at time 200
setTimeout(blinker,0, $(this)) is the same as check the third column at time 400
....
setTimeout(blinker,0, $(this)) is the same as check the sixteenth column at time 3200
Now what blinker does is checks to see if stopped, the original flag I created is true or false. It becomes true when clicking stop which then means that the column check is not carried out and nothing is play. If false then the normal process of the drum machine is carried out.
Now here's the problem. If you go to the deployed version of the app this flagging introduces a nasty bug. That bug is if you press play the sequencer starts, but if click play again another run is started which is not how a drum machine is supposed to work. Essentialy what I would like to see is if I press play no other sequencerRun should kick off if I press play again. Also if you click play, stop, play I get the same side effect. I think my main problems are the fact that sequencerRun schedules future beats right away and my flagging. Any one have any idea on how to tackle this?
Just make use of your stopped variable within the .play click handler:
$('.play').click(function(){
if (stopped) {
stopped = false
sequencerRun();
runSeq();
}
});
If the stopped flag is false, clicking play again will do nothing. To stop the rest of the queued sequence when you click stop, you'll need to clear the timeouts that have been set. First of all, make sure you keep a handle to each of them:
var sequenceTimeouts = [];
var sequencerRun = function(){
var currentTime = 0;
var starting = 200;
var startTime = 0;
//reset array
sequenceTimeouts = [];
for(var k = 0; k < 16; k++){
$(".instrument td .beat" + k).each(function(){
//push each timeout into the array
sequenceTimeouts.push(setTimeout(blinker, currentTime,$(this)));
})
currentTime += starting;
}
}
Then within your stop click handler, clear each of those:
$.each(sequenceTimeouts, function(i, timeout) {
clearTimeout(timeout);
});
I am trying to get an accurate calculation of how much time a user has spent watching a video. The time they spent watching it should not include skipping forward or when the video is paused. The code I have now is giving me a different percentage each time (I'm using an interval). I don't know how else to go about this?
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
clicked_video = true;
arr.length = (player.getDuration()-1).toFixed(0);
done = true;
}if(event.data === YT.PlayerState.PLAYING){
id = setInterval(check, 1000);
}if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.BUFFERING){
clearInterval(id);
var percent = 0;
for(var i=0;i<arr.length;i++){
if(arr[i] == "x"){
percent++;
console.log(percent);
}
}
percent = (percent / arr.length) * 100;
alert(percent + "%");
}
}
function check(){
arr[Math.floor(player.getCurrentTime())] = "x";
}
Here is a demo, I think the variables and functions have names explicit enough to understand everything, but if you have any question or problem, go ahead and ask.
One thing I have to mention is that it won't be exact. If your interval gets executed once per second and the user skips a part in the middle of a second, that one might not be counted. To have a more accurate percentage, you can execute your interval more often (100ms here, I got 97% when watching the video back and forth), but be careful not to use too much resources.
var player, timer, timeSpent = [], display = document.getElementById('display');
function onYouTubeIframeAPIReady() {
player = new YT.Player( 'player', {
events: { 'onStateChange': onPlayerStateChange }
});
}
function onPlayerStateChange(event) {
if(event.data === 1) { // Started playing
if(!timeSpent.length){
timeSpent = new Array( parseInt(player.getDuration()) );
}
timer = setInterval(record,100);
} else {
clearInterval(timer);
}
}
function record(){
timeSpent[ parseInt(player.getCurrentTime()) ] = true;
showPercentage();
}
function showPercentage(){
var percent = 0;
for(var i=0, l=timeSpent.length; i<l; i++){
if(timeSpent[i]) percent++;
}
percent = Math.round(percent / timeSpent.length * 100);
display.innerHTML = percent + "%";
}
JS Fiddle Demo
Here's a way to get a frame-perfect precision of how much of the video the user has watched:
The recipe
Get a reference to the HTML5 video player
Grab the played property off the video object, which returns a TimeRanges object (see https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges)
Iterate over the played object, and add up all the ranges
Example
/**
*
* #param {HTMLVideoElement} video
* #returns {{total: number, percent: number}}
*/
function getPlayedTime(video) {
var totalPlayed = 0;
var played = video.played;
for (var i = 0; i < played.length; i++) {
totalPlayed += played.end(i) - played.start(i);
}
return {
total: totalPlayed,
percent: totalPlayed / video.duration * 100
};
}
By calling the above helper function and passing it your video object, you'll get back an object with two properties: the total length (in seconds) that the user actually watched, and the percentage of the video's duration that this represents.
The cool thing about this approach is that it is 100% accurate. If the user watches the first 5 seconds of the video over and over, it'll still register that only 5 seconds were watched. The browser itself keeps track of this, so you don't need to set intervals, listen for events, etc.
Youtube iframe player api provide a function to turn the current played time of the video player.getCurrentTime():Number. That can be used to track how much the user watched the video.
You can also make use of player.getDuration() api to get the total video time and calculate the percentage of the progress
here is the alternation of the exampled shared by first answer http://jsfiddle.net/ndbseftp/
I'm trying to store my script that counts numbers starting from 23,000 to always continue to appear it's "live" and always counting using Web Storage. I've tried implementing this and so far, I can't seem to get it to work. What would be the best solution to get this to work and function to always count even when refreshing, etc? I've included my JS Fiddle and code below. Any help is kindly appreciated!!
EDIT: To clarify.. I'm trying to have a "live" counter always going no matter what when you go to the page, refresh it, whatever. It's just always going and getting bigger no matter what just like my script does.. However, everytime I refresh it starts back at 23,000.
HTML
<span id="liveNumbers">23,000</span>
JS
if(typeof(Storage)!=="undefined")
{
setInterval(function(){
random = (Math.floor((Math.random()*2)+1));
var plus = Math.random() < 0.5 ? 1 : 1;
random = random * plus;
currentnumber = document.getElementById('liveNumbers');
var curnum = parseInt(currentnumber.innerHTML.replace(",",""));
document.getElementById('liveNumbers').innerHTML =
commaSeparateNumber(curnum + random);
}, 3000);
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
}
else
{
// Sorry! No Web Storage support..
}
Here's my attempt: fiddle
The logic:
On first visit (no localStorage data) the counter is reset to 23000.
Counter runs while page is open.
When closing the page, the current counter value is stored together with the current timestamp (lastSessionEnd).
When user loads the page again, the time that has passed since he closed the page is translated into interval cycles which are passed to the randomRange function and added to the stored counter from the last session.
Here's the code:
if(window.localStorage) {
//configs
var updateInterval = 3000; //ms
function randomRange() {
return Math.floor(Math.random()*3)+1; // [1..3] range
}
var counter = +localStorage.getItem('counter');
if (!counter) { //first load
counter = 23000;
} else { //simulate randomness that would have happened while the user was away from the page
var lastSessionEnd = +localStorage.getItem('lastSessionEnd');
for(var l = Math.floor((getUnixTimeStamp() - lastSessionEnd)*1000/updateInterval); l--;) {
counter += randomRange();
}
}
var liveNumbers = document.getElementById('liveNumbers'); //cache DOM query
function refreshDisplay() {
liveNumbers.innerHTML = commaSeparateNumber(counter);
}
refreshDisplay();
setInterval(function() {
counter += randomRange();
refreshDisplay();
}, updateInterval);
function commaSeparateNumber(val) {
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
function getUnixTimeStamp() {
return Math.floor(Date.now()/1000);
}
window.addEventListener('beforeunload', function() {
localStorage.setItem('counter', counter);
localStorage.setItem('lastSessionEnd', getUnixTimeStamp());
});
} else {
// Sorry! No Web Storage support..
}
NOTE: this is not perfect, here are the caveats:
As it is done purely in the front-end, it is easily hackable by manipulating the localStorage. Don't use this for important stuff.
As it uses the localStorage API, if the user opens the page in more than one browser (or more than one computer/device), each one will have a different counter. Also, cleaning all personal data will reset the counter.
Finally, there's an interval cycle rounding error, it doesn't account for interrupted interval cycles. E.g. the user closes the page midway through an interval cycle, the next time he opens the page that half-cycle will be discarded and a new one starts. I believe this is a small detail which would take more effort to fix than it's worth, but I'll leave that decision and effort to you.
I'm in the process of creating a site that preloads several large gifs. Due to the size of the images. I need them all to be loaded before displayed to the user. In the past I have done this numerous times using something basic like this:
var image = new Image();
image.onload = function () { document.appendChild(image); }
image.src = '/myimage.jpg';
However, i'm loading a group of images from an array, which contains the image source url. It should show a loading message and once they have all loaded it show perform a callback and hide the loading message etc.
The code I've been using is below:
var images = ['image1.gif', 'image2.gif', 'image3.gif'];
function preload_images (target, callback) {
// get feedback container
var feedback = document.getElementById('feedback');
// show feedback (loading message)
feedback.style.display = 'block';
// set target
var target = document.getElementById(target);
// clear html of target incase they refresh (tmp fix)
target.innerHTML = '';
// internal counter var
var counter = 0;
// image containers attach to window
var img = new Array();
// loop images
if (images.length > 0) {
for (var i in images) {
// new image object
img[i] = new Image();
// when ready peform certain actions.
img[i].onload = (function (value) {
// append to container
target.appendChild(img[value]);
// hide all images apart from the first image
if (value > 0) {
hide(img[value]);
}
// increment counter
++counter;
// on counter at correct value use callback!
if (counter == images.length) {
// hide feedback (loading message)
feedback.style.display = 'none';
if (callback) {
callback(); // when ready do callback!
}
}
})(i);
// give image alt name
img[i].alt = 'My Image ' + i;
// give image id
img[i].id = 'my_image_' + i
// preload src
img[i].src = images[i];
}//end loop
}//endif length
}//end preload image
It's really weird, I'm sure it should just work, but it doesn't even show my loading message. It just goes straight to the callback.. I'm sure it must be something simple, I've been busy and looking at it for ages and finding it a tad hard to narrow down.
I've been looking over stackoverflow and people have had similar problems and I've tried the solutions without much luck.
Any help would be greatly appreciated! I'll post more code if needed.
Cheers!
If I'm not totally wrong the problem is with you assignment to
// when ready peform certain actions.
img[i].onload = (function (value) {...})(i);
here you instantly call and execute the function and return undefined to the onload attribute, what can not be called when the image is loaded.
What you can do to have access to the value 'i' when the image is loaded you can try something like the following:
onload = (function(val){
var temp = val;
return function(){
i = temp;
//your code here
}
})(i);
this should store the value in temp and will return a callable function which should be able to access this value.
I did not test that if it is working and there maybe a better solution, but this one came to my mind :)
Try this for your onload callback:
img[i].onload = function(event) {
target.appendChild(this);
if (img.indexOf(this) > 0) {
hide(this);
}
// ...
};
Hope you can get it working! It's bed time for me though.
Edit: You'll probably have to do something about img.indexOf(this)... just realized you are using associative array for img. In your original code, I don't think comparing value to 0 is logical in that case, since value is a string. Perhaps you shouldn't use an associative array?