Play YouTube and Vimeo about plyr

[sampotts]

Fixed in v1.5.0

[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.

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 [email protected] 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
#8 (comment).

[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.

Would be cool for plyler to have this as well.

On Tue, Mar 3, 2015, 7:20 AM Eric Martindale [email protected]
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
#8 (comment).

[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 👍

Np.

On Sat, Apr 4, 2015, 8:56 PM Sam Potts [email protected] wrote:

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

—
Reply to this email directly or view it on GitHub
#8 (comment).

[AxelBriche]

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

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.

Awesome. Thanks for the update.

On Mon, May 11, 2015, 7:54 AM Sam Potts [email protected] 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
#8 (comment).

[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 :)

@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 👎

@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 👍 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/

@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.

@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 👍

[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

Ill second that. :P

EDIT: Changetip never works for me. :(

@changetip, send $4 to @sampotts !

[changetip]

Hi @sampotts, @nahtnam sent you a Bitcoin tip worth 13,559 bits ($4.00), and I'm here to deliver it ➔ collect your tip.

Learn more about ChangeTip

[sampotts]

Cheers guys, that's awesome 👍 👍

I'll work on Vimeo and Twitch asap.

@sampotts Awesome. I have been insistent on Twitch because my site is going to be related to gaming. ;)

[calvintam236]

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.

Finally found out why this message is showing up. If you run the site in HTTP, you will get it as The Chromium Projects marked HTTP as non-secure. https://goo.gl/rStTGz

[sampotts]

I'll create another issue for that. Not really too sure what to do there apart from disable full screen on non HTTPS for Chrome then.

[calvintam236]

@sampotts Actually I also see this message in Opera. At this moment it is just a warning which can be ignored; however, when The Chromium Projects kills it, everyone using plyr with HTTP cannot use full screen.

[sampotts]

Just upgraded to Opera 31 and seeing it myself. OK I'll start an issue since it's not related to this one.

For the record, the https issue is #110

[sampotts]

I have Vimeo in a working state now but the issue is that Vimeo's embed has limited options in terms of controls. The emphasis is left more to the video owner. I have, however found a way to hide the controls (while still being responsive of course) by making the iframe taller than 16:9 (the video is centered) so the controls are hidden in the overflow. This has me worried though that it will be a breach of the Vimeo AUP. I need to look into it further before I release it and get people in hot water with Vimeo. If only they added an option like YouTube have 👎

[martindale]

Can we unify the API for YouTube vs. other sources? It's extremely inconvenient to have to tear-down and reconstruct a new Plyr instance when switching from a YouTube source to an MP3 source, and vice-versa.

[sampotts]

Yep. I'll work on that this weekend then. Makes sense. I'll release it with Vimeo as well (which is pretty much done).

[sampotts]

I've basically rewritten how the .source api function works, it will now only accept an object but has much greater flexibility which makes sense for the next big feature, playlists. You can change type, specify title (for the aria label on the play button), specify multiple or single sources and tracks (although only one track is supported until I sort out multiple tracks).

player.source({
    type:       'video',
    title:      'Bug Buck Bunny',
    sources: [{ 
        src:    'https://cdn.selz.com/plyr/1.0/movie.mp4',
        type:   'video/mp4'
    },
    {
        src:    'https://cdn.selz.com/plyr/1.0/movie.webm',
        type:   'video/webm'
    }],
    poster:     'https://cdn.selz.com/plyr/1.0/poster.jpg',
    tracks:     [{
        kind:   'captions',
        label:  'English',
        srclang:'en',
        src:    'https://cdn.selz.com/plyr/1.0/example_captions_en.vtt',
        default: true
    }]
});

This is currently in the develop branch. I'm just finishing up some more testing and working with a couple of Vimeo quirks and then it's good to go. Should be within the next couple of days. I'll report back.

Then the plan is to tackle loop and playback speed controls before I crack on with playlists.

[martindale]

This is great. I'll be using this immediately (from the develop branch indeed, but will switch to a release as soon as it's available). Thanks a ton!

[sampotts]

Cool. Let me know if you find any bugs, I'm still finishing it up.

[calvintam236]

@sampotts Can you update the API doc for .source()? For tracks, is it necessary to put kind, label, etc.? Can I just give a link if I have only one track?

[sampotts]

Yes I will once it goes to the master branch. As I said, it's in the develop branch at present so if I update the release docs, it'd be a bit pointless. It's in develop because, well, it's in development still. Not final.

Yes, you can just specify src for tracks. I've made it so whatever you supply in that object is used for the html element's attributes. You can obviously add your own attributes, or just use src. I'll make it replicate the behaviour for the sources property so rather than an array, you can specify a single url.

Documentation takes time and as I've not finished it yet, things are still changing.

[martindale]

Okay, started my integration, but I'm not sure of the correct approach as expected by the library. I've posted the following experiment, which implements the general use case I need:

plyr.setup();

var player = document.getElementsByClassName('player')[0].plyr;

var sources = [
  {
    src: 'http://inumedia.io/whalestep.mp3',
    type: 'audio/mp3'
  },
  {
    src: 'SZO5QYP-GeQ',
    type: 'youtube'
  }
];

setInterval(function() {
  var time = new Date();

  player.source({
    sources: [(time % 2) ? sources[0] : sources[1]]
  });

  player.play();
}, 5000);

It seems to correctly load the direct mp3, but not the YouTube video. Am I doing it wrong? Maybe this case will help you define an API, alternatively.

[sampotts]

Damn. I'll take a look. What's your html look like?

[martindale]

It's Jade, but very simply:

extends layouts/media

block content
  h1 yo

  .player
    video

block scripts
  script.
    //var player = plyr.setup();
    plyr.setup();

    var player = document.getElementsByClassName('player')[0].plyr;

    var sources = [
      {
        src: 'http://inumedia.io/whalestep.mp3',
        type: 'audio/mp3'
      },
      {
        src: 'SZO5QYP-GeQ',
        type: 'youtube'
      }
    ];

    setInterval(function() {
      var time = new Date();

      player.source({
        sources: [(time % 2) ? sources[0] : sources[1]]
      });

      player.play();
    }, 5000);

    (function(d, p){
    var a = new XMLHttpRequest(),
        b = d.body;
    a.open("GET", p, true);
    a.send();
    a.onload = function(){
        var c = d.createElement("div");
        c.style.display = "none";
        c.innerHTML = a.responseText;
        b.insertBefore(c, b.childNodes[0]);
    }
    })(document, "/img/sprite.svg");

[sampotts]

That looks fine. I'll have a play tonight and get back to you. Sorry about that.

[martindale]

Heroic. Getting library interfaces built in a way that's easily accessible is a non-trivial problem. You're doing an amazing job.

[sampotts]

Sorry I just looked through this again but basically the shape of your object is a little off. You need to pass the type of the player to the method as well.

var sources = [
    {
        type: 'audio',
        sources: [{
            src: 'http://inumedia.io/whalestep.mp3',
            type: 'audio/mp3'
        }],
        autoplay: true
    },
    {
        type:   'youtube',
        sources: 'SZO5QYP-GeQ',
        autoplay: true
    }
];

setInterval(function() {
    player.source(sources[Math.floor(Math.random() * 2)]);
}, 5000);

Also calling play() straight away on a YouTube video after source change will throw an error because there's a high chance it's not had time to load. I can add a callback if you think it's beneficial, otherwise you can pass an autoplay option as above.

Still working on the Vimeo issue. It works but their API throws an error for some reason:

Uncaught TypeError: Cannot read property 'ready' of undefined

Had a busy week but hopefully I can find some more time this week.

[martindale]

I'd like as consistent an API as possible across all sources; YouTube and direct mp3 streams are the only ones we are using in production now, and we have several different code paths depending on the audio player's behavior with a particular source. Our choice to use Plyr was in hopes that we can finally find a tool that lets us reduce that to exactly one code path!

Ideally, you use the callback you mention internally, to fire an event to Plyr, which then handles the YouTube videos identically to a direct MP3 stream. I'm not sure Plyr is designed this way, though!

On the note of consistency; can the YouTube sources property be an array? In your above example it's a single value, while the mp3 source has an array. (We actually keep track of several different YouTube videos per audio track, and the clients will rotate on to the next element in the array if the first video doesn't load -- which is surprisingly common! Some videos aren't available in some countries, so the ability to use "fallback videos" is necessary).

@changetip, give @sampotts 1,000 bits for continuing to be awesome.

[changetip]

Hi @sampotts, I've delivered a tip worth 1,000 bits (1,000 bits/$0.25) from @martindale to your ChangeTip pocket.

Learn about ChangeTip

[sampotts]

Hey @martindale , that's fair enough. I can make the YouTube type sources property an array also and do something with error handling. I need to look at this as a whole for HTML5 too.

It does in a way. Once YouTube's API fires a ready event, then event listeners etc are setup. These differ slightly between audio, video, YouTube and Vimeo but to you, they're the same (or should be).

[martindale]

Hey @changetip, give @sampotts a helpful hacker to help him wrap up the YouTube and audio APIs! Can't wait to finish integration with soundtrack. :D

[changetip]

Hi @sampotts, I've delivered a tip worth a helpful hacker (25,000 bits/$6.97) from @martindale to your ChangeTip pocket.

Learn about ChangeTip

[sampotts]

Heh, thanks for this. I'll try and find some time today to crack on. If not, tomorrow.

[sampotts]

Pushed changes to the develop branch. Could you take a look and let me know.

• Fullscreen audio option
• Fullscreen bug fix when changing source
• Docs for .source method
• .source api method is universal so the same shape object can be passed for all types although only the first item in the array will be used for YouTube and Vimeo at this point until I work on error handling as a whole.

I think it might be ready to go to master (with a big warning around Vimeo, I'm not sure what's going on with that)

[martindale]

Alright, this looks much better. There's a couple minor tweaks I'll be submitting in a pull request, but first some questions;

• is play among the methods that YouTube doesn't support? Uncaught TypeError: plyr.media.play is not a function when attempting to call player.play() immediately after loading a YouTube video.
• are you opposed to unifying the video and youtube "type" at the top level, in favor of adding a new attribute type to source? The "media" would still have type: 'video', even if one of the sources in the array had type: 'youtube' (as perhaps another source is a pure mp4 stream, or an audio file).

Was unable to test Vimeo for now, but will happily do so once I iron out the above two issues. Adding Vimeo support to soundtrack will be great! Their API always has been a pain...

[sampotts]

• I presume you want to just autoplay the video you added with the API? You can just add an autoplay property to the source as above. It's because the YouTube API needs to load first.
• It would make the code a bit more complex since I'd have to parse the each of the sources before I could determine the actual type of the player to set up the correct markup, etc. I could but it doesn't feel as clean to me but if you feel really strongly, I could look at it.

You're right about the Vimeo API. I still have the error I mentioned above, seemingly for no apparent reason. It's really hard to work out what's going on. That said, the YouTube API isn't great either. With YouTube, you have to poll for everything whereas at least Vimeo uses PostMessage so it's more push than pull.

[martindale]

Hrm. We do want autoplay, but this working shouldn't be dependent on that feature (since we'll be allowing our users to turn the player off entirely). I'd rather Plyr wait for the YouTube API to emit some sort of "loaded" event, but allow .play to be queued up when called so it actually plays when the YouTube event is emitted, not simply hard error... though your comments about polling make me a sad panda when it comes to the feasibility of this.

More importantly is the separation of source and media objects; I agree it's more complex, but it's a little more accurate. A YouTube video is still a video after all, not a different "type" of media. We've the need to feed an array of potential sources to the player, and they might all be of different types (YouTube, mp3, etc.), so this would vastly simplify the code necessary to use Plyr, which would be a better experience for future users, IMHO.

[sampotts]

Yes, sorry, it's just the way the YouTube API works. Not so great. Both Vimeo and YouTube API's have their flaws. A combination of them both would be good. I could however look at queuing the call to play() but that would probably set the expectation that all the other API methods would allow this (meaning massive headache) so perhaps a callback would be better.

Yes, it's more the type of the container. Which makes sense to me. There's arguments either way but I'll take a look. If we're to do that then the mime type within the sources array would be mandatory. The way it's setup, any attribute inside the sources array is mapped to a HTML attribute (so you can easily add custom) but I guess I'll have to rethink that.

[sampotts]

@martindale , I was thinking about your suggestion to use type as video for YouTube and Vimeo and I think it makes sense as we might be able to use YouTube as a source for Audio also (at a later date).

Vimeo will be a beta feature on release, I'll need help/feedback on it I think. I think the fragaloop API is really the problem and might have to write my own (it just uses window.postmessage anyway). We'll see.

I'm almost done with v1.5. Sorry it's taken so long. Christmas and New Year was pretty hectic. Hope you all had a good one! 👍

[anthonymasure]

Hi guys, what about a support for Dailymotion?