screengrab from a youtube video in javascript - javascript

I have a user requirement in which I want to take a screengrab of what is playing on a youtube video at the moment. I have read about rendering to canvas, but it seems to take dom elements, and not the current flash video position. Is this possible? I can't use browser extensions, it has to be a button on the site that does this.
Thanks in advance.
Edit: How about if I use the HTML5 renderer?

Its not possible to do this. Getting a youtube video as a dom video element is possible using the HTML5 embed option. The problem is youtube videos reside in an iframe, and due to cross-domain security restrictions, you will not be able to access the video dom element, which is necessary to draw it to a canvas.

Related

Flash fallback for jplayer won't work in chrome because "Invisible [Flash] content is always blocked."

So I have to use the Flash fallback for Jplayer when the user is using Google Chrome because of the way our audio streaming server is set up (HTML5 just doesn't play nicely with our Streaming Audio Icecast server for some reason, live streams are fine but static mp3s are not). All other browsers are fine!
However, it keeps blocking the player even if the site is selected to always play the flash plugin, and now it's printing this error in the console: "Same-origin plugin content from http://kansaspublicradio.org/widgets/audio-popup/jplayer/Jplayer.swf must have a visible size larger than 6 x 6 pixels, or it will be blocked. Invisible content is always blocked."
What's the best/easiest way to make the Flash player not be invisible?
Jplayer uses HTML elements for the controls. It's not like your typical Flash game or animation or anything, the Flash part is just used to play audio (when HTML5 isn't being uses).
Thanks for any help! I'm also aware that Flash is going away in a few years, hopefully we have a more ideal solution figured out by then.
Open jquery.jplayer.js or jquery.jplayer.min.js and find setAttribute("width". Here you can adjust the width and height of the loaded player. Setting this to something above 6x6 should fix your issue.
Unfortunately the official jPlayer project is no longer maintained and pull requests are ignored, so you'll have to do this manually.

Can't get html5 video in a webpage to loop or autoplay on android browser?

The final device I'll be putting this on is an android TV box, but I'm testing on my galaxy s5. Both are having the same issue.
I'm using Full Screen Browser by Klurige, and I originally had some GIF's at the bottom of the page that I wanted to loop, but they ended up being to clunky and big to run efficiently on the TVbox, so I decided to switch over to html5. I've tried with WEBM and MP4, both are doing the same thing.
I have the autoplay and loop attributes in the html5 video as such:
<video id="zach" loop autoplay class="picture"><source src="P-Zach.webm">Error</video>
Neither works be default in the browser. I just see a gray video icon. I can't even click to start it.
I've tried formatting in different ways and everything mentioned on the broken-links.com blog post people keep pointing to. I've tried javascript .play() options. None do anything.
If I add the controls attribute to the video, I can play the video, so I know the video file works, but it still won't loop.
Any help?
Okay, so it looks like it has something to do with android blocking webview from letting javascript control the html5 video.
That, in combination with the lack of native support for loop or autoplay attributes made me ditch fullscreen browser and switch to the only browser I could find that DID support those - Firefox.
I used an app called Ful!screen (or something like that) to remove the notification bar, loaded firefox with the webpage (with html5 playing and looping perfectly) and scrolled down slightly to hide the top bar.
Tada! Fullscreen browser with html5 video instead of GIFs.
Solved my own issue another way.

Can't access YouTube video through YouTube JS API inside of Google Chrome Extension, but can inside of JS Fiddle

I am attempt to understand the logic behind whatever trips the 'blocking' mechanism for YouTube's video playback.
Here I am attempt to play back a song which is blocked from embedded playback inside of a JS Fiddle. Observe that it works:
http://jsfiddle.net/E7B9C/17/
Now, I use the exact same code inside of my Google Chrome extension:
http://www.meomixes.com/ if you'd like to click to download extension.
http://www.meomixes.com/Test.crx for direct link to extension.
Observe that I cannot playback the same youtube video:
I was wondering what my debugging options were for this scenario. Does anyone have any ideas on what I should explore? I've tried requesting the following permissions in my manifest, but it did not have any effect:
"permissions": [
"http://*.youtube.com",
"https://*.youtube.com",
"http://*.google.com",
"https://*.google.com"
]
I've placed the full source of Test.crx here: http://www.meomixes.com/Test.zip
To load:
Unzip
Go to Google Chrome's extension page and enable 'Developer Mode'
Click 'Load Unpacked Extension' and point to the unzipped directory.
Observe that the video does not play back.
Last of note: The song plays happily in a Facebook post.
EDIT: I found this: http://gdata.youtube.com/feeds/api/videos/UfESt2KdOdc?v=2&prettyprint=true for the video in question. It pairs with: http://apiblog.youtube.com/2011/12/understanding-playback-restrictions.html.
Just building on the first response. Basically, there is a setting called 'syndication' which prevents from playing on 'external devices' such as TVs and Google Chrome Extensions.
Looking at ways to bypass this issue now.
The Youtube iframe implementation seems to block certain referring urls from displaying licensed content.
The Problem
These referring schemas didn't seem to work with the particular video you're testing with.
chrome-extension://
file://
It seems like content licenser, UMG, opted to prevent any plays from extensions or local files. An alternative is to avoid using videos that contain licensed content, but that's boring.
It's inconvenient but there is a workaround that will allow you to implement the iframe player into the extension. All Youtube cares about is that the the player is embedded on a page somewhere on the internet.
Proxy Page
Try replacing the iframe src in popup.htm with the jsfiddle result frame from your example and reload your plugin.
<iframe width="200" height="200" src="http://fiddle.jshell.net/E7B9C/17/show/"></iframe>
You should see the previously "unavailable" video playing now. Your extension now references a page you control on jshell.net. All Youtube knows is that you're calling their player from jshell.net.
Controls
Now that we have a player, you may notice that you don't have any of the Youtube controls available to you since you're now referencing your own iframe that's referencing the Youtube iframe and it's API. As if it weren't fun enough already, you now get to make your own iframe API to communicate from the chrome-extension to your iframe to Youtube's iframe!
Under normal circumstances a parent can set the child frame's window.location.hash and that frame watches and parses any changes that come through. The child then calls some callback in the parent directly with some new information.
Edit: Instead of using window.location.hash, you could use HTML5's window.postMessage() instead and avoid having to deal with checking and parsing the hash continuously.
That should get you up and running.

Javascript on embedded videos

Is it possible to use javascript to seek position of videos embedded on a page (Videos from Youtube, DailyMotion, Revver, etc)?
If you mean you want to read the position of progressbar of the video player it could be done, but the player (usually flash object) has to expose appropriate methods or events to javascript. The exact way of intercating with player depends on the specyfic flash object you use.
YouTube has a javascript API which can be used to control the video playback, including seeking the position

Is there any way to control EMBED Code Videos?

Is there any way to control YouTube EMBED CODE. For example I am using YouTube embed code in my site. Is there any way to control the video like forward, backward, stop etc. with my own buttons.
Is this possible?
Any help will be appreciated.. Thanks in Advance.
Fero
YouTube has a JavaScript and Flash API that you can use to build your own player or control the player programmatically.
The documentation is here: http://code.google.com/apis/youtube/overview.html
There are several examples in the documentation for controlling your own "chromeless" player. This is probably what you want to use if you want your own buttons.
All of the major browser-embedded video player types have ways to do this, but the method is different for all of them.
YouTube uses a Flash player, which poses a special problem: Flash video players have no ability to handle external JavaScript calls other than what is specifically added by the programmer that built the player. That is, if YouTube didn't build their player with support for external scriptability, you can't script it. This isn't a flag -- on/off -- it's that Flash makes you explicitly publish an external scripting API, and you have to know what the calls look like to make the player do what you want. This is unlike, say, QuickTime, Windows Media Player, or the new HTML 5 <video> tag, all of which have documented basic playback control like you're asking about.
It's probably possible to build your own FLV player (or buy one, like the popular JW Player, which does have a JavaScript API) and point it at the actual video file served by YouTube. I don't know if they try to obscure the video file URL, but once you find out what it is, you're golden.

Categories

Resources