How to simply query vimeo for video information with Javascript? - javascript

We are tring to get information about a video via the Vimeo API. i.e. By using
a jquery $.ajax get request to:
vimeo.com/api/v2/video/253742573.json
However, this won't work on Internet Explorer 11, as it complains about CORS issues. Naturally, we can't control what HTTP headers the Vimeo replies with to correct this.
Is this a known issue with the Vimeo player?
Is there a better way to query Vimeo for information on a Video with Javascript over HTTP?
If there is, where can we find a good example of this?

I believe this is a known issue with IE. The response headers from Vimeo are correct.
I've seen similar issues with various browsers over the years.
The solution that I've used in the past is to implement a pass-through on my own server. In that scenario, my JS in the browser would no longer call vimeo.com/api/v2... directly. Instead, it would call mydomain.com/vimeoapi/api/v2... and my server (which doesn't care about CORS) will retrieve the JSON from Vimeo and pass it back to the JS in the browser.
Honestly, this solution makes me grind my teeth every time (WHY MUST I MAKE ARCHITECTURAL COMPROMISES FOR JUST ONE BROWSER! CURS YOU, STARS!), but I've done it a handful of times now and it plays out reasonably well. It's a straight-forward solution that can be done quickly, and if you find a preferable solution, it's easy to switch this out again.

Related

How to respond to SCTE-35 messages

I am working with a live video stream coming from AWS MediaLive, and CloudFront as a CDN. We have a player inside a Vue front-end, which is showing the stream, and rendering HTML/JS/CSS items on the screen, based on what is happening in the stream.
Now, in our very naive solution we have a service pushing events over a web socket to the front end to render these things "in sync" with the stream delay, but this doesn't work, since the stream delay is neither stable, nor is it consistent across different screens.
As far as I can read, there should be ways to embed the data/events we need directly into the stream as meta-data.
I think SCTE-35 could be exploited here, even though this is really for ad insertion, I think we should be able to use it to encode other events/data?
My question is two-fold... Is what I describe above (SCTE-35) the way to go about this, or should I use something else (ID3 seems another option)?
And, more importantly, how can I manage to read/respond to these events on the front-end (javascript) side, because that is the real thing I can't seem to find any information on.
Thanks in advance.
That is generally handled via timed metadata. HLS uses ID3, or DATE-RAGE in the manifest, CMAF has emsg, DASH... doesn’t really have a standard that I know of. You need a player that know how to extract the information, and execute a callback.

Play YouTube video in sync across multiple clients

Hello Stack Overflow community,
I'm a rather novice coder, but I have a project I've been devising that looks more and more complicated every day, and I don't know where to start.
With inspiration taken from Synchtube & Phonoblaster, I'm looking to create something for my website that will allow visitors to watch YouTube videos and playlists that I have curated, together in real-time, in-sync.
Because I want to be able to put this in the context of my own website, I can't use the services listed above that already do this - so I wanted to figure out how to roll my own.
Some things have been written about this topic on Stack Overflow, and other blogs:
HERE
and HERE.
Because I still consider myself a novice programmer, and a lot of the information I've found on Google and Stack tends to be more than 1 or 2 years old, I'm still unsure where to begin or if this information is outdated. Specifically, what languages and tools I should be learning.
From what I've gathered so far, things like Javascript, Node.JS, and the YouTube API would form the crux of it. I've not used any of these before, but would be interested to see whether other experienced coders would have their own suggestions or ideas they could point me towards.
I appreciate you taking time out to read this post!
Hope to hear from some of you soon :)
Many thanks.
It partially sounds like you need a live stream from Youtube. You can find more info here. https://support.google.com/youtube/bin/answer.py?hl=en&answer=2474026
If you can get that going, then syncing play between any number of users is as simple as embedding a regular youtube embed of your stream in a browser.
Looking past that, if you wanted to sync video playback amongst any number of users, the first big problem is learning how to set time on a video. Luckily, that's easy with the hashbang #t=seconds.
Eg: http://www.youtube.com/watch?v=m38RdUGqBPM&feature=g-high-rec#t=619s will start this HuskyStarcraft video at 619 seconds into the video.
The next step is to have some backend server that keeps track of what the current time is. Node.js with Socket.io is incredibly easy to get setup. Socket.io is a wonderful library that gracefully handles concurrency connections from web sockets all through long polling and more and works well even on very old browsers. Note that websockets aren't even required, but will be the most modern and full-proof method for you. Otherwise its hacks and stuff.
One way this could work would be as follows.
User1 visits your site and starts playing the video first. A script on your page sends an XHR request to your server that says, "video started at time X". X then gets stored as the start time.
At this point, you could go 2 routes. You can have a client-side script using the Youtube API to poll the video and get its current status every second. If the status or time changes, send another request back to the server to update the state.
Another simple route would be to have the page load for User2+, then send an XHR request asking for the video play time. The server sends back the difference between the start time from User1, then the client script sets the 't' hashbang on the youtube player for User2+. This lets you sync start times, but if any users pause or rewind the video, those states dont get updated. A subsequent page refresh might do that though.
The entire application complexity depends on exactly what requirements you want to have. If its just synchronized start times, then route #2 should work well enough. Doesn't require sockets and is easy to do with jQuery or just straight javascript.
If you need a really synchronized experience where any user can start/stop/pause/fast forward/rewind the video, then you're looking at either using an established library solution or writing your own.
Sorry this answer is kind of open ended, but so was your question. =)

Trapping downloads within Google Chrome

I've looked around and haven't been able to find anything that will allow me to detect when a download is finished within Chrome.
The reason I want to do this is that I want to better "sort" my downloads once they are downloaded, automatically based on various criteria.
I've tried setting up a listener with: webRequest.onCompleted and while that seems to work for most resources (images, .ico, etc), I can't get it to trap a .ZIP or .EXE file download. I'm not sure why it won't, but it'll work for other resources without a problem.
I haven't set a filter on it so it should (as far as I know) be pulling in all resources and checking them for the specified extensions. I know that might not be the best way to do check, but I haven't found a better one yet.
Looking at the experimental downloads API, that doesn't seem to do what I want either as that mostly just initiates a download, which isn't what I am trying to do.
Thanks for any assistance!
Haven't seen an extension for this, but when you think about it this kind of makes sense. It almost seems like something that should be native to the browser...I guess it does give you the most recent downloads though and that is relevant to your current task. Anyways, thought I would mention that there is an experimental api that allows interaction with the native download interactions. This may be a reference needed in getting the extension cooking. Good luck
Link to Experimental API:
http://developer.chrome.com/extensions/experimental.downloads.html

Enable Youtube's JS API after the movie was loaded

I'm looking to control videos on my page, some of which may have not been embedded with the JavaScript API parameter on (enablejsapi) at first. They may come in both iframe or the old object embed types, though this shouldn't matter.
I looked around and none seem to be up to my standards, Enable YouTube API on existing player - his answer restarts the player (re-creates the element with apienabled)
I'm having a hard time with the documentation here https://developers.google.com/youtube/iframe_api_reference and https://developers.google.com/youtube/js_api_reference both seem to focus on irrelevant stuff. No technical details on how the API actually treats the elements so it's hard for me to guess where to go with this. Not the first time Google's JavaScript API is giving me hard time, certainly not the last
So I want to be able to control, or at least partially control (listen to play/stop events) players currently on the page which when were first embedded, did not request the API with them. Is there a way to enable the JavaScript API for them live? or hack the way to it?
Update: My progress so far surrounds re-creating the elements on the page with the API, the one technique I was trying so hard to avoid. I'm still facing all sorts of object/iframe api differences that's making me want to change my career so it will take a bit more polish. I will paste some coffee code when I figure everything out. It's nothing too fancy, but it's the only universal way to add a 'global listener', if you will, to a page full of existing embedded videos not necessarily with API enabled in them.
TLDR (Too Long Didn't Read): The Youtube API is imperfect.
As mentioned in the update, this question was solved by recreating the embed/iframe element. There isn't much magic here - just add the api variable to the URLs. Unfortunately I could not find a nicer way to enable it.

How can I do video capture in the browser?

Ideally what I was initially looking for is an implementation of the HTML5 Media Capture API with a polyfill rolling back to Flash, however, my research has concluded that the API is in its infancy and is yet to be taken up by any of the major vendors, and in addition to that, Flash means for doing what I need seem scarce.
I need to be able to take webcam input from a camera, show a live preview, record, and play back that recording, nothing more, no upload to server necessary, all local.
Are there any decent Flash solutions? Or other means of achieving this?
I have found a lot of references to Red5, to clarify, would that refer to this: http://www.red5-recorder.com? Is this really the tool to use or are there better alternatives?
I ended up using http://nimbb.com for this, the free version has some limitations but gives the basic functionality needed met my criteria for the project.
In addition to my needs it also allows users to upload recordings to the Nimbb website and share over social, which can't hurt!
I too am looking around for the same feature. The best I found was Open-Tok, they do all the work
http://www.tokbox.com/opentok/plugnplay#VideoMessages
My problem is my site is adult in nature, so the people recording the videos would more than likely be naked. This is against the terms of service for Open-Tok I do like their offering.

Categories