An Ember.js component to play and control YouTube videos using the iframe API. Pass it a YouTube video ID and you're good to go! Every day this component is being used on Radio4000.
You can see a demonstration at ember-youtube.surge.sh.
- Full support for all YouTube player events (and errors)
- Custom (external) controls (make your own buttons)
- Custom progress bar in full sync with the YouTube player
- Extra: custom time properties (for instance "4:31 / 7:58") formatted with Moment.js
Inside your Ember CLI project run:
ember install ember-youtubeUse the component like this:
Here's another example with all options. Only ytid is required.
The YouTube API allows you to define an object of options called playerVars. With ember-youtube, you can optionally set this object on the component:
// controller.js
myPlayerVars: {
autoplay: 1,
showinfo: 0,
// Setting an origin can remove a YouTube 'postMessage' API warning in the console.
// Note, this does not have any effect on localhost.
origin: 'https://www.example.com'
}If you want your own buttons to control the player there are two steps.
- Make the ember-youtube component available to the outside, which normally means your controller. You do this with the
delegateanddelegate-asproperties of ember-youtube. They expose the component and give you a target for your button's actions. Like this:
- Specify a target on your actions. Now, and because we used
delegateanddelegate-as, you'll have aemberYoutubeproperty on your controller. This is where we'll target our actions. It allows you to do this in the template where you include the player:
You could also do this:
Here's an example of seeking to a certain timestamp in a video. It accepts a number of seconds.
The ember-youtube component send four different actions: playing, paused, ended and buffering. You should map them to your own actions like this:
actions: {
ytPlaying(event) {},
ytPaused(event) {},
ytEnded(event) {
// here you could load another video by changing the youTubeId
},
ytBuffering(event) {}
}Even if you don't supply an ytid to the ember-youtube component, it will make sure the iframe player is created as soon as possible. But if you set lazyload=true, it will wait for an ytid. This will, in some cases, improve the initial render performance. Example:
Let's write a component with two custom formatted timestamps such as "13:37". First make sure moment and moment-duration-format are installed. Then create a new component with the following template:
And here's the JavaScript part of the component:
export default Ember.Component.extend({
currentTimeFormat: 'mm:ss',
durationFormat: 'mm:ss',
// returns a momentJS formated date based on "currentTimeFormat" property
currentTimeFormatted: computed('emberYoutube.currentTime', 'currentTimeFormat', function () {
let time = this.get('emberYoutube.currentTime');
let format = this.get('currentTimeFormat');
if (!time || !format) {
return null;
}
let duration = moment.duration(time, 'seconds');
return duration.format(format);
}),
// returns a momentJS formated date based on "durationFormat" property
durationFormatted: computed('emberYoutube.duration', 'durationFormat', function () {
let duration = this.get('emberYoutube.duration');
let format = this.get('durationFormat');
if (!duration || !format) {
return null;
}
let time = moment.duration(duration, 'seconds');
return time.format(format);
})
});On iOS autoplay of videos is disabled by Apple to save your precious data. I haven't been able to circumvent this. The user needs to tap the video itself before we can call the player's play/load methods. If anyone has a workaround, let me know.
git clonethis repositoryyarnember server- Visit your app at http://localhost:4200.
npm run lint:jsnpm run lint:js -- --fix
ember test– Runs the test suite on the current Ember versionember test --server– Runs the test suite in "watch mode"npm test– Runsember try:eachto test your addon against multiple Ember versions
Please file an issue if you have any feedback or would like to contribute.
Thanks to https://github.com/oskarrough/ember-youtube/graphs/contributors.
This project is licensed under the MIT License.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent