Highligt sections of Vimeo embedded video with APIs - javascript

I have embedded a Vimeo video in a page with its IFrame. I would like to highlight some sections of its progress bar to point out which parts are the most important.
I am asking if exists a client-side "higlight API".
I looked through the documentation of Vimeo but couldn't find it, and I need to understand if such a feature is not implemented or I couldn't just be able to find it.

Related

YouTube stream show subtitles below player

I am have been playing around with a lot of options. popcorn.js, mediaelement.js, jwplayer and I can not find a combination that works. I'm working on a learning website and I need to display the subtitles of the video below the player. I can get it to work all good when the video is hosted on the server and it has a file link. I was using MediaElement.js because all the videos I need are on YouTube so it needs to stream from there.
I have tried a few different combinations and popcorn was originally going to work. When I started playing with it I found their YouTube streaming no longer works. I've followed their examples but its a no-go. Also with popcorn I couldn't get to work with any other subtitle file other than TTML (even though they support the others) and I need one that can have html inside of it.
My latest endeavor got me using the script from here: http://www.storiesinflight.com/js_videosub/#code
This lets me use .srt which is good, but I can't get it to let me stream YouTube with any other JavaScript players so I'm back to where I started.
I have seen a post about going through one of the transcoding websites and using the .mp4 link, but I don't want to rely on a middleman. If that site shuts down then my site will also be screwed. I doubt YouTube is going anywhere anytime soon.
There's a surefire way to do this and that's to create your subtitles in notepad and then upload them to youtube
Then Go to your Account Settings page in Youtube
Select Playback from the left-hand menu
Select/check 'Always show captions'
You should Check Show automatic captions by speech recognition (when available) to enable automatic captions for videos that don't already have captions provided)
Save! and you're done
No javascript required

Youtube Player API Difference (Chromeless vs IFrame) - Which is better?

So I have scoured the web on information on how to embed the Youtube players but actual detailed tutorials seem extremely sparse or completely non existent. In addition, although there is documentation found on the google site
it seems to be somewhat confusing for a novice on how to implement either which leads me to my question. It seems that there are two players, the IFrame player and the Chromeless player which uses an swf embed. I have gone ahead and provided examples of both:
IFrame Player(using angular): http://plnkr.co/edit/H5VnlPhOaa2n6ZsfSj5p?p=preview
Chromeless Player: http://plnkr.co/edit/Epz9uXDZ1uIiV4lgB0vw?p=preview
My question is, what is the difference? What is the advantage of using one over the other? Does one have more backwards compatibility with browsers? Mobile Support? The Chromeless player seems to require less code to run as most of the code runs out of the box from the included "swfobject.js".In addition it seems that the chromeless player does not work on iOS devices due to the flash requirement. Is this correct?
Addendum: You can see the iframe and chromeless player are mostly the same besides the fact that you can click on the iframe youtube player to pause it while the chromeless player can only be controlled from the play/pause controls.
One big benefit to using iFrames with Youtube is that it is basically a new window with a call back to youtube... and guess what? Youtube will interpret what browser and platform the request is coming from and populate the appropriate content BUT iFrame can be slow loading on older browsers and on mobile devices where object/embed would not. Parameter settings (to tune the user experience on your site) is roughly the same. We all know SWF files won't work on iOS so you might need to factor that into your development for your userbase.

youtube thumbnail using paused videos

I'm trying to make a web-app in which people can remix youtube videos...
I looked at the youtube api, and it doesn't seem to support thumbnail at a specific location.
So, I'm trying to create multiple chromeless youtube videos, start them at specific positions and stop them almost immediately to make them seem like "thumbnails".
However, the videos all show up black when I try to do so.
Here's the link to the source code: http://pastebin.com/6Bpr1Dsz
Note that when I comment out the pauseVideo part, the videos play fine.
ps: I tried to make this work on jsfiddle, but it wouldn't work.
Thanks :)

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.

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