Play YouTube and Vimeo

[ghost]

Is there any way we can use youtube videos instead of html5 videos?

Thanks.

[sampotts]

We definitely could. It would probably have to be some sort of module/add I'd say as not everyone would want it but it would definitely be a plus. The YouTube player would have to be rendered as an iframe and the YouTube API used to control it. It can be done. I'll look into it. The same would apply for Vimeo I'd imagine. For obvious reasons they don't expose the raw files although services exist to fetch the mp4 from YouTube pages. Hardly ideal though and probably against YouTubes usage policies.

[ghost]

It would be great to see it implemented. I think a lot of people would actually use this because the only other solution is to pay for this: http://embed.ly/

On Thu, Feb 26, 2015 at 1:40 AM Sam Potts notifications@github.com wrote:

We definitely could. It would probably have to be some sort of module/add I'd say as not everyone would want it but it would definitely be a plus. The YouTube player would have to be rendered as an iframe and the YouTube API used to control it. It can be done. I'll look into it. The same would apply for Vimeo I'd imagine. For obvious reasons they don't expose the raw files although services exist to fetch the mp4 from YouTube pages. Hardly ideal though and probably against YouTubes usage policies.

— Reply to this email directly or view it on GitHub https://github.com/Selz/plyr/issues/8#issuecomment-76148423.

[edap]

Yes, it would be great, or at least, one of the reason I would love to switch to plyr

[martindale]

VideoJS has a plugin that does this, but it seems they use the iframe rendering option in most cases.

[ghost]

Would be cool for plyler to have this as well.

On Tue, Mar 3, 2015, 7:20 AM Eric Martindale notifications@github.com wrote:

VideoJS has a plugin that does this https://github.com/eXon/videojs-youtube, but it seems they use the iframe rendering option in most cases.

— Reply to this email directly or view it on GitHub https://github.com/Selz/plyr/issues/8#issuecomment-76964980.

[martindale]

If it's possible to use a native video element, that would be vastly preferred to the iframe solution.

[sampotts]

I'd also prefer that option but unfortunately getting access to the raw mp4 files from YouTube and Vimeo isn't possible (Vimeo do I think depending on what settings the author sets). In that case if it's to be done, it might have to use iframes and PostMessage/APIs to control playback. I'd probably build this as an add-on or module as mentioned previously.

[maimairel]

+1 for this feature. I'll immediately switch to plyr when this gets done :)

[2braincells2go]

From time to time the feature would be cool to have. Add the ability to overlay some text on YT videos and you have a huge winner for many YT heads.

[AxelBriche]

+1 for this features.

[heyallan]

+1

[sampotts]

Sorry, I will get around to this, I just need to lock myself away for a day :+1:

[ghost]

Np.

On Sat, Apr 4, 2015, 8:56 PM Sam Potts notifications@github.com wrote:

Sorry, I will get around to this, I just need to lock myself away for a day [image: :+1:]

— Reply to this email directly or view it on GitHub https://github.com/Selz/plyr/issues/8#issuecomment-89711862.

[AxelBriche]

Good luck, this features is now the most important part of this library I think (design is already awesome) ;)

[ghost]

Any update?

[sampotts]

Sorry, I have started on YouTube playback. Will update once I have more. Will find some more time this week.

[AxelBriche]

Hello, some news ? :)

[sampotts]

Sorry, I'm still working on it around other commitments. Will try to devote some more time to it. I really want to get it in and I've already made a good start on it.

[ghost]

Awesome. Thanks for the update.

On Mon, May 11, 2015, 7:54 AM Sam Potts notifications@github.com wrote:

Sorry, I'm still working on it around other commitments. Will try to devote some more time to it. I really want to get it in and already made a good start on it.

— Reply to this email directly or view it on GitHub https://github.com/Selz/plyr/issues/8#issuecomment-100934160.

[AxelBriche]

Hello, news about youtube and vimeo please ?

[sampotts]

Sorry I'm currently on vacation at the moment. It's hard to find the time so if anyone wants to contribute, feel free to pull develop and do a pull request if you're desperate.

I am working on it just life takes precedence over work and life's been busy.

[adriengibrat]

Could you push what you got on a branch so we could have a look and contribute?

[sampotts]

Will do when I get home. Currently in Dallas, about to board my 17 hour (!) flight home to Sydney.

[AxelBriche]

Thanks, can't wait for this feature, so cool :)

[sampotts]

A bit of an update on this. I finally managed to find some time today and I have made some more progress with YouTube playback. All going well, I should have something to release this week. It'd be great if you guys could give it a spin once done and let me know any changes/improvements.

I'll keep you guys posted and sorry about the slowness on this. Next up Vimeo.

[AxelBriche]

Nice and thanks, I try when update is online :)

[ghost]

@SamPotts Good to hear. I think instead of doing Vimeo next, you should do Twitch.tv. Its much more popular IMO.

[sampotts]

Just pushed the YouTube support in v1.2.0. Please give it a test and if you find anything quirky, let me know. I'll make a start on Vimeo on this week. Sorry it's taken so long!

Hey @nahtnam, I'll take a look but Vimeo's API is decent (better than YouTube's) and not sure Twitch has support for HTML5? It wants me to install Flash. That's a no-go :-1:

[ghost]

@SamPotts Yeah, not sure if Twitch.tv has html5 support (they mentioned they do for safari on mac).

This is the api docs that twich has: https://github.com/justintv/Twitch-API/blob/master/embedding.md

Not sure if it will work.

[calvintam236]

@SamPotts Will you add API functionality for adding/ switching source for Youtube (and Vimeo) videos?

[martindale]

Even moreso, changing sources altogether – for example from a YouTube video to an mp3 audio file.

[sampotts]

@calvintam236 Yep, this is in the docs. Have a read :+1: https://github.com/Selz/plyr#embeds

The .source() API method can also be used but the video id must be passed as the argument.

@martindale I'll work on this too, shouldn't be too hard (he says...)

[calvintam236]

@SamPotts Can you add an example what is the format for embed source in the API? You mean just plyr.source('YouTube video ID')? If so, it would be great to add the info into the API table.

[sampotts]

Yep, e.g. go to plyr.io and chuck this in the console:

document.querySelector("#youtube .player").plyr.source("-jp3o7R5Q1I")

I'll add to the docs now in the API table

[calvintam236]

I notice it is getting a warning message in Chrome.

requestFullscreen() is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

Another issue I have is when I set the source as how you mentioned above at my script, it loads as mysitelink/youtubeid instead of loading youtube video.. Maybe because it requires to set type = 'youtube'? API does not have any method to set it. https://github.com/Selz/plyr/blob/master/src/js/plyr.js#L1605

[sampotts]

Weird, I'm not seeing that error with fullscreen in Chrome? The source change works for me although I've just seen that it doesn't reset the seek position properly in Chrome (annoying) so I'll look at that.

Currently switching between HTML5 and YouTube isn't supported but I am working on that and will get that sorted before moving on to Vimeo.

[calvintam236]

I see that warning message everytime I fullscreen the youtube video on the demo. Another warning I see is "Untrusted origin: https://www.youtube.com".

Is it possible to add caption support for YouTube videos?

[calvintam236]

@nahtnam @SamPotts Good news! Twitch is phasing out Flash for HTML5. http://www.vg247.com/2015/07/24/twitch-takes-another-step-in-ditching-flash-with-new-html5-player/

[ghost]

@calvintam236 Yep, but I havent actually seen it yet. I would really like a twitch version of plyr.

[calvintam236]

@nahtnam It seems twitch.tv works without flash now. I disabled the flash player on Safari, and the video can play. It just works with HTML5.

[sampotts]

The YouTube API (and YouTube in general) is a bit flaky. I occasionally see errors in the console but none actually effect playback which lets be honest, is the most important thing.

There is no API method (that I could see) to toggle captions on or off. Currently it will use whatever your account (if logged into YouTube) setting is.

Good news about Twitch. They must be rolling it out in phases or they do as Facebook does and user agent sniff, for whatever reason. I still get this:

I'll add it to the list but after Vimeo.

[calvintam236]

@SamPotts The caption option does not load for YouTube videos. Does not show icon nor caption. Try this video with captions at your demo.

document.querySelector("#youtube .player").plyr.source("CevxZvSJLk8")

I can load twitch video without flash. They might just roll it out and the CND is not updated yet. Attached screenshot on Safari. Works with front page video as well.

[calvintam236]

@SamPotts Is this the parameter you are looking for in order to enable caption? https://developers.google.com/youtube/player_parameters#cc_load_policy

Setting the parameter's value to 1 causes closed captions to be shown by default, even if the user has turned captions off. The default behavior is based on user preference.

[ghost]

@SamPotts Twitch mentioned somewhere that html5 only works on user pages...

[calvintam236]

@nahtnam It seems work in other places now. Test it yourself without flash.

@SamPotts I just get another error at YouTube when I changed the source at your demo.

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://plyr.io".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

A possible solution at http://stackoverflow.com/questions/16941139/methods-of-removing-the-youtube-iframe-api-console-error-blocked-a-frame-with

[sampotts]

@calvintam236 Yes. I use Opera though, which also doesn't work for HTML5 on Facebook because they UA sniff, no other reason. Another reason UA sniffing is not ideal. If you change UA to Safari, videos play fine. Still, I'll do twitch after Vimeo like I say.

Well that error will be caused by their API I guess then, since the API is used to create the iframe. I'll look into it though. Odd that I'm not seeing any of these issues.

Oh that option would only work at initialisation so the captions couldn't be toggled.

@nahtnam Cheers, I'll look into it :+1:

[martindale]

@ChangeTip, give @SamPotts $5 for working so hard on this library!

[changetip]

Hi @sampotts, @martindale sent you a Bitcoin tip worth 16,949 bits ($5.00), and I'm here to deliver it ➔ collect your tip.

Learn more about ChangeTip

[ghost]

Ill second that. :P

EDIT: Changetip never works for me. :(

[ghost]

@ChangeTip, send $4 to @SamPotts !