How to save HTML5 video plays/hits - database

Is that possible to save the plays that a video (HTML5 based) was played in a Database?
If yes, how?
I properly search for this answer, not so lucky.

Two things you'll need. First you need to figure out your events. If you just want the play event, you can add an event listener.
Something like the following (not using jquery)
var _video = document.getElementById("video");
_video.addEventListener("playing", play_clicked, false);
function play_clicked() {
/* Put your tracking function here */
alert("play was clicked");
}
To track it, I would use some Analytics, Google Analytics is a good one.
Here are some links to help you along a bit further:
Previously Asked Question (with answer)
A page showing example of how to track all kinds of video events
Event Tracking with Google Analytics

Related

reactjs,how to deal with user event trigger multiple times in short time?

I use react.js + es6 + webpack to develop my application.
recently, I find if I click a button multiple times in short time, the click handler will trigger multiple times.
I think it's a common case, code snippet like this:
#debounce()
onMidCardClick(url) {
console.count('onMidCardClick trigger times : ');
window.location.href = url;
}
before navigate to the url address, onMidCardClick event handler will triggers multiple times.
So, my way is create a debounce.decorator.js to handle this situation.
I think my way's advantage is easy to read and keep maintainability.
My question is:
1. Is it necessary to handle this? I mean, maybe react synthetic event will handle this for me?
2. My application has many events, I add debounce decorator for many of them. I test it, it works fine, but I am not sure I am correct. Because I saw many applications not deal with this.
No, all you need to do is, the moment user clicks a button, disable the button till you get the response. You can also disable other buttons too if required. Ex.
<button type="button" disabled={!this.clicked}>Button</button>
From a usability point of view, if the user clicks on a button/li/div element and you are executing some logic, it is better to give a visual indicator that some processing is happening, with a loader or a progress bar.
You can write a react component for a full page loader like this and show it to the user, which effectively prevents the user from clicking the element again while giving a visual clue as well.

Message format in Channel API (GAE)?

I'm working on a HTML5 collaborative canvas drawing tool on GAE. Essentially people draw, send their coordinates and their motion to GAE through channel API and then other people receive the updates.
As required by the GAE documentation, I have a function in my javascript code to collect messages received from the server:
socket.onmessage= function (message) {
var s=message.data;
//Extract X,Y,motion out of s and Draw(x,y,motion)
};
However, the message data I'm sending are actually x and y coordinates and a string of either ("start"/"drag") in the form of:
x=505.0000457763672&y=111.66667175292969&type=start
I actually have no idea about any of the variables or features in this 'message' class and I wouldn't know to use 'message.data' if I didn't see it in someone else's source code - is this actually documented anywhere? I'd like to be able to use the substring features to effectively extract the 3 values but they don't seem to work with message.data.
Any idea if there are detailed documentations on the full member functions/classes/variables documentation on the message class?
Any input is much appreciated!
I wouldn't say it's documented WELL, but it is documented in the channels API docs:
https://developers.google.com/appengine/docs/python/channel/javascript
It specifically does say the message object has a parameter called 'data'.
You should be able to use javascript substring features just fine, but unless you show your code, no one will be able to help you with that.

Preferred way of creating links with backbone.js

I'm trying to wrap my head around backbone.js but I'm finding it hard due to the lack of (IMO) good examples.
First of all, what is the best way of getting a link to an object.
If I want to get the edit url of an Album model I could do album.url() + '/edit', is this really the best way?
Also, I'm trying to make my application work 100% without javascript so I don't want my URLs/links to say /albums/#1/edit, I want it to be /albums/1/edit and override this in JS.
I'm thinking I create normal URLs and use jQuery.live to call router.navigate in backbone.js
I never got this to work however, when I call router.navigate('/albums/2', true) the URL changes but my show action is never called. If I refresh it's called so the route is matched.
What am I missing?
The basic answer, which is kind of frustrating, is "there is no preferred way!". Backbone.js doesn't tell you how to set up links, you can do it any way you like. I found this flexibility just as annoying as you do, at least at first.
So here's the way I'm approaching this on my current project, with the (big) caveat that this is just one of many ways to do things in Backbone:
For the most part, I don't use actual links. There's no explicit reason not to, but it means you have to keep track of a bunch of URL strings that have to be consistent. I would rather stick all the URL formatting in my routers and not deal with it elsewhere.
To open a new "top-level" view, like an editing screen, I set something that fires an event. In the application I'm currently working on, I have a global State model, and to open a new view I call state.set({ topview: MyTopView }). This causes the state object to trigger change:topview.
Any piece of the UI that needs to change when the top-level view changes has an update method bound to change:topview. When the event fires, they look at state.get('topview') and update as necessary.
I treat my routers as only marginally specialized parts of the UI - they're essentially views that render in the browser address bar, rather than the window. Like other views, they update the state object on UI events (i.e. a new URL), and like other views, they listen to the state object for changes that cause them to update. The logic that the editing screen has the URL albums/<albumid>/edit is fully encapsulated in the router, and I don't refer to it anywhere else.
This works well for me, but it adds an entirely new pattern, the global State object, to the Backbone structure, so I can hardly call this the "preferred" approach.
Update: Also note that .url(), in the Backbone idiom, refers to the model's URL in the back-end API, not the front-end URL (it's not like Django's get_absolute_url). There is no method in the default Backbone setup that gives you a user-facing URL for your model - you'd have to write this yourself.
Also, I'm trying to make my application work 100% without javascript; so I don't want my URLs/links to say /albums/#1/edit, I want it to be /albums/1/edit and override this in JS.
you can do exactly this w/ pushState. just enable it in your Backbone.history.start call:
Backbone.history.start({pushState: true})
this tells Backbone to use the HTML5 History API (a.k.a. "PushState"), which uses full URLs exactly like you're wanting.
read up on the history api here: http://diveintohtml5.ep.io/history.html
and I wrote up a 2 part series on using pushstate w/ the second part focusing on progressive enhancement in backbone, to do what you're needing:
http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/
and
http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/
hope that helps :)

(bing) maps: +5000 pinpoints

I am building a map application with the silverlight bing maps control.
In the map control I want to show all of the subscribed customers.
The amount of customers is somewhere between 5000 and 7000, this means I can't show them all at once. This would result in a crash I guess.
How would you solve this issue?
I've read about events on zoomlevels etc. about tile layers about spatial sql
but I have no idea what the right solution is in this situation and where to begin.
This seems like a pretty basic problem when working with maps but there is little to no information on how to handle lots of data when working with bing maps.
Can anyone explain or point me to a good tutorial?
You can use a space-filling-curve or a spatial-index to get those points nested with the zoom-level of your map application to achieve a cluster effect http://blog.notdot.net/2009/11/Damn-Cool-Algorithms-Spatial-indexing-with-Quadtrees-and-Hilbert-Curves. There are many implementation of sfc and hilbert-curves. I've uploaded my own at phpclasses.org (hilbert-curve, bsd licence) and with a quadkey function for a cluster function. I've succesful implemented it for some customers. The idea is to search for a quadkey from left to right to get only a portion of pois. www.maptiler.org uses a quadkey with a z-curve. Probably you are getting better answers at gis.stackexchange. A sfc has usually a constraint of power of 2.

MediaElement is repeating clips automatically, and sometimes fails to play them

I have an app which plays a few short sound clips. To play them I simply set the source to the new clip path, which is a WMA I encoded with Expression Encoder using WP7 settings. It's not even worth sharing the code -- there's an event handler. In it, I set the ME.Source property to a new Uri. It's set to AutoPlay, so that's it! Here:
private void PlaySound(ItemViewModel sound) {
Model.CurrentSound = sound;
CurrentSound.Source = new Uri(sound.Path, UriKind.Relative);
}
private void Sounds_SelectionChanged(object sender, SelectionChangedEventArgs e) {
var list = ((ListBox) sender);
var item = (ItemViewModel) list.SelectedItem;
SelectItem(item);
}
Also I should point out that the sounds are all resources (build type = Resource). I need them to be because the app needs to discover them dynamically. The paths are all like this, "sounds/foo/bar/sound.wma". Sometimes there is a space in the path, it is url encoded with %20 (this is how the resource manager returns the path, I didn't do that).
The problem is many people, but not all, are saying that the sound auto-repeats. The sounds are very short, only a few seconds, so it's very annoying. I don't understand how this is happening, the MediaElement doesn't even have an auto repeat feature.
Perhaps related, but some have also complained that every now and then the sound does not play. They have to click it again. All I can think of is that there is something wrong with how the sounds are encoded, but they are WMA, and as I said, I encoded them using the 'playback in WP7' settings in expression encoder. How could it be that it works usually but not other times if that were the case, anyway?
I'm at a loss and my app is getting some bad reviews because of this behavior. Help!
"there's and event handler" but you don't say of what? It could be that event firing over and over or not at all in some cases. Potentially your code has a logical errors where you have failed to detach an existing handler and then added another. As usage progresses you end up with a single event being handled by multiple handlers.
Edit
The Selection changed event is notorious for firing more frequently than we'd like. I suggest you add some debounce code that makes record of the last item selected and how long ago. If the next selected item is the same as the last one and it was say less than a second ago then swallow the event without doing anything else.
It sounds like you might be trying to play Sound Effects - in which case you might be better off using the XNA SoundEffect mechanism
e.g. http://www.japf.fr/2010/08/sound-effect-in-wp7-sl-application/
SoundEffect only works for WAV files (PCM) - but I've used it in several apps and scripts including embedded content files and downloaded files (e.g. translation and ironruby scripts).
The XNA class works well within SL and allows multiple sound effects to be played at the same time.
The problem with repeating turned out to be needing to do this:
MediaPlayer.IsRepeating = false;
I think what happened was the user would be in another app that sets this to true, and upon opening my app that value was still true! That has to be a bug, it's totally unexpected. If you look at other sound-playing apps like soundboard apps, there are users complaining in the reviews about the very same thing.. "I wish it wouldn't repeat the sounds..."

Resources