Showing last added element in time range object (HTML5 Video related) - javascript

There is a function in HTML5 that shows you the range of buffered time ranges in a video. I want to show the last added 'buffered' section, but this is proving to be quite difficult.
Basically when you click on a time in a video (lets say 00:16), the video begins to buffer if its not already. So we end up with a buffer that goes like 16s-18s, then 16s-20s, etc as the video loads. Now lets say we click somewhere else before that in the video where it is not buffered. So I click on 00:05. The 'buffered' array will have 16-20s and 5s-6s or however much is loaded.
HOWEVER, the 5s-6s will be added BEFORE the 16s-20s in the time range array. That means that we can't just select the last element of an array as the newest buffered section, rather we have to select the first element. Then if you click somewhere else before the 5s mark you end up with the first part of the array being a different value. Since they are added in this fashion I can't find the latest buffer section added.
What is the best way to go about finding this?

The easiest way to do this would be to make a copy of the TimeRanges object in the buffer property every time something new is added to the buffer. You can then use this "history" to find the order in which time ranges were added.
For example, with jQuery:
var history = [];
$(yourvideo).on("seeked",function(){
history.push(jQuery.extend({}, this.buffered));
});

Related

Aurelia JS - multi level binding/update?

I'm not sure whether I'm using the right terminology here - but here is an example:
https://gist.run/?id=57ed46429e4583eb4c3fb11814451a55
This is how it looks like in Chromium:
Basically, the entries on top (red outline) are a visualization of an array as the "first-level" data display; here one can toggle each element's selection, and make a multi-element selection (red background). The array that is the source of the "first-level" display is mydata in first-level-items.js.
Those items that are selected in "first-level", are then shown again in "second-level" (green outline); here the same information of name and value is displayed, although a bit differently. Here also one can toggle an elements selection - but only one "second-level" element can be selected. The array that is the source of the "second-level" display is myseldata in second-level-items.js.
The intent here, is that once a "second-level" selection has been made, a slider appears, to change the .value property of the particular object which is the selected array element.
My original question (which is why I started this post/example at all), was:
How do I ensure that whenever the slider is changed, the value is updated in both second-level and first-level display?
... however, for reasons beyond me, this in fact does work somewhat in this gist.run example (but it still doesn't work in my actual project, which forced me to come up with the example to begin with). Also it only works somewhat, in the sense that when loading the example page at first, after making first and second level selections, and then changing the slider, the .value will be updated in both first- and second-level display. But as soon as I try deselecting on second level - or changing the selection on second level - then updating stops. So, I guess this question still stands...
After a second-level selection has been made, deselecting on second level (by clicking to toggle) does NOT remove the slider; how can I have it behave like that?
The update happens only on the slider's onChange - basically, while you drag and slide, this component emits onSlide, but it will generate onChange only at the end when the mouse is released (that is, when the sliding has stopped). How can I update both first- and second- level display while the slider is sliding?
And finally - is this how this kind of a problem is best addressed in Aurelia? That is - I currently have one array in first-level-items.js; first-level-items.js then has a singleton reference to second-level-items.js, so it can call a method within it, to change a filtered copy of the array on the second level, which then serves as a source both for second-level display and the slider... Is there a better way to organise this?
Boy, this was a pain, but here's what I think is the solution:
https://gist.run/?id=c09fea3b82a9ebc41e0a4c90e8665b04
Here are some notes:
Apparently, there is something wrong applying if.bind or show.bind on the input element of the slider - instead, the input element should be put in an enclosing div, and the div should have if/show.bind applied
Furthermore, if.bind should not be used, as it re-instantiates the slider element - use show.bind so we can get a reference to the slider widget at start already, even if it is hidden
Seemingly, using TaskQueue in attached() is the only way to get a reference to the slider at start
Once we have a reference to the widget, re-apply it on each second level element, whenever they change
Do not set this.myselChanging to null to specify no target of the slider (simply count on hiding the slider appropriately)
For a continuous change (onSlide), simply use this.myselChanging.value = e.value; in the handler - both first-level and second-level values will be changed
Beyond this, it seems arrays are copied by reference, so the multi-level update happens without further intervention...
Though, would still love to know what is the proper way to do this...

CKEDITOR remove element event

I using CKEDITOR for a text, and i want limited number of embed ( video and pictures ) who can upload a user, this mean need count there, problem is it I don't know who to count when a video or picture is delete white backspace. I was trying many way to catch event change and key but event key do not track when you press backspacing and remove a element. And with event change I do not see what element was removed or to make a comparation between actual data and previous data. I was try find who undo is implemented but I don't found.
If someone have any ideea who can track when remove a element please help me.
I found a combination between change and beforeCommandExec i count number of oembed class and number of img tag, i don't know if is best practice but for moment is only posibility to count your elements.

jQuery/JavaScript program breaks after completion number is changed

In a spelling game I have created there is a grid that is populated with words. The aim of the game is to spell the words by clicking on the letters on the side, which animate into the empty spaces in the grid. Words are highlighted if they are to be spelt, so the user can see where to go next. The aim of the game is to spell the required amount of words in the grid to complete the game. I usually set this to two, but have just changed it to 3 and the program keeps breaking after I spell the second word.
if (score.right == 3) {
................
................
}
Usually when you spell a word correctly I use a "click.trigger" function to move to the next highlighted word in the grid. At the moment after 2 correct ones the program either just doesn't go onto the next one or goes back to the last one and doesn't allow you to click the letters.
setTimeout(function() {
jQuery('.next-question').trigger('click');
}, 1500);
I have tried to go through with break points but cannot seem to find the issue. Can someone help me to get it working again and tell me where I was going wrong?
At the moment in my game there is no hint pictures or hint sounds so to find the highlighted word you have to use the console. Try answering two right then it will crash.
Here is a fiddle for the broken one: http://jsfiddle.net/smilburn/Dxxmh/101/
Here is a fidddle to a previous one that worked fine: http://jsfiddle.net/smilburn/Dxxmh/100/ (some class names may have changed)
First thing. The images dont show in the new version because for their links, you're using relative path which doesnt exist as far as jsfiddle is concerned. The earlier one uses absolute links. Same thing goes for the audio files.
Next thing, at the beginning you have var definitions like
var hintPic = $("#hintPic")[0];
This statement returns the first element from the set as a plain DOM element. So later when you're trying to show it
hintPic.show();
It wont work because 'show' is a jquery function. Remove the [0]'s from the variable definitions and it should work just fine.

Confused! Trying to MP3 metadata in EZiest way possible, Preferably without extra libs

I've searched all over google, here, HTML5Rocks, etc...
Everywhere I look I get "half" an answer or told to use some other lengthy lib that doesn't even work with what i'm trying to do.
I've made a full jQueryUI plug for making a simple audio player, the last step is filling the playlist from an option like:
playlist: [
'<?= base_url("audio/samp/Kalimba.mp3"); ?>',
'<?= base_url("audio/samp/Maid_with_the_Flaxen_Hair.mp3"); ?>',
'<?= base_url("audio/samp/Sleep_Away.mp3"); ?>'
]
Where in the plugin I have something like:
for (x in ele.playlist) {
// get meta data for song title, artist, album, & length
// so I can add it to button inside li
// example: in a callback where param for AudioContext is audon
// audcon.button() // call to saved jQuery object of list item button
// .prepend($("<p /">).text(dataReturned.songTitle)) // add element to button with text of song title
}
Of course, i've found part of the issue is, this for loop runs faster than the time it takes to read a file, which I should think is no problem as long as I can use a call back. For example, using HTML5, I add the button html as a property to my AudioContext, so that when it finishes reading, I can easily access the li button that duration belongs on.
Can anyone give a simple, clear cut example of how to achieve what I want, cause none of what i've tried is getting me anywhere.
I have found pretty ez how to use HTML5 to get the duration of each song and use a callback to put the duration in each button after its loaded, but the duration doesn't really tell a user much about the song loaded other than how long it is, lol.

How to implement a sortable playlist in jQuery

I am making a simple music playing online app. I would like to make a song playlist, and I would like the songs in the playlist to be sortable. I plan to use the jQuery "sortable" plugin. However, I would like to keep track of what order the songs are in, so that when one song finishes, I know which song to start next. Instead of creating an event handler to be executed when the user changes the order of the songs, and actually keeping track of what order songs are in, my current solution is simply this:
Keep track of the id of the currently playing song element
When the song finishes, use jQuery to find the element with the current id
Use .next() to get the next song to play
Is there anything wrong with this implementation? Would it be better to constantly keep track of the order of songs?
Seems entirely appropriate and I actually use that exact same approach on a completely unrelated website. Here is what I do to get the next id, I know you said you already had something working but I thought I'd share anyways in case it helps:
current_id = window.my_id;
next_id = $('#' + current_id).next().attr('id');
if (next_id == undefined) {
return; // no more siblings after it
}
// do what you need to do here with next_id to actually load the next content
// in my web apps case, it removes some elements and just changes the hash
// which another function handles
current_id = next_id;
window.my_id = current_id;
There isn't really anything wrong with that. It saves having to keep an Array of the order, which would need to be updated per reorder as opposed to just reading the next track only when required (at end of previous one).

Categories

Resources