1
00:00:00,470 --> 00:00:03,940
The MediaElement Player has default
controls that will be enough for

2
00:00:03,940 --> 00:00:05,400
most projects.

3
00:00:05,400 --> 00:00:09,250
But what if you want a feature
that doesn't exist in the library?

4
00:00:09,250 --> 00:00:13,650
Fortunately, MediaElement.js lets
you extend it through plugins.

5
00:00:13,650 --> 00:00:19,320
For example, let's say we want a skip back
button to rewind the media a few seconds.

6
00:00:19,320 --> 00:00:22,800
I'll first go to the plugins page,
and see if that exists.

7
00:00:24,170 --> 00:00:26,780
In MediaElement js on
the front page there,

8
00:00:26,780 --> 00:00:29,860
we have a link called plugins,
that I'll go to.

9
00:00:29,860 --> 00:00:32,610
And this is a GitHub repository page.

10
00:00:34,210 --> 00:00:37,380
And down here, it says Available plugins.

11
00:00:37,380 --> 00:00:40,820
So if I click that,
there's all the available plugins and

12
00:00:40,820 --> 00:00:43,241
there is a Skip Back control.

13
00:00:44,390 --> 00:00:47,598
So, let's go back to the top and
see how to install it.

14
00:00:50,453 --> 00:00:53,631
Under the installation instructions,

15
00:00:53,631 --> 00:00:58,940
it says download the package
from this web page actually.

16
00:00:58,940 --> 00:01:02,370
And reference any plugins you
need from the dist folder,

17
00:01:02,370 --> 00:01:07,320
that's the distribution folder, and add
any configuration related to the plugin.

18
00:01:08,470 --> 00:01:13,203
So to get this repository,
I can go to the top here and

19
00:01:13,203 --> 00:01:17,946
clone or download,
is a option, and download zip.

20
00:01:20,692 --> 00:01:23,120
And once that's downloaded,
I can open it up.

21
00:01:25,920 --> 00:01:29,978
And inside the distribution folder,
there is the skip-back folder.

22
00:01:31,080 --> 00:01:33,170
And there are five files in here.

23
00:01:34,200 --> 00:01:39,250
Now, we're just going to need
the min.js and the min.css.

24
00:01:39,250 --> 00:01:41,700
Those are minified files,
and they're suitable for

25
00:01:41,700 --> 00:01:44,960
production, as opposed to these two.

26
00:01:44,960 --> 00:01:50,150
So, we'll just need these two, and
then we'll grab the I18n file as well.

27
00:01:50,150 --> 00:01:55,110
And that just gives support for
languages other than English.

28
00:01:55,110 --> 00:01:57,129
If you're curious about minification,

29
00:01:57,129 --> 00:02:00,080
I'll put some information in
the teacher's notes for you.

30
00:02:01,410 --> 00:02:05,380
So if I go back to my project,

31
00:02:05,380 --> 00:02:08,550
I've actually already created
a skip back folder and

32
00:02:08,550 --> 00:02:14,480
I put it in the main folder and
I've loaded these files up.

33
00:02:14,480 --> 00:02:17,570
So we just need to link them to our HTML.

34
00:02:18,880 --> 00:02:23,770
And to do that, I just want to show
you the installation instructions

35
00:02:23,770 --> 00:02:29,160
show to put the JavaScript files for
the plugins underneath

36
00:02:29,160 --> 00:02:34,890
the mediaelement-and-player.min
file where that's loaded.

37
00:02:34,890 --> 00:02:36,590
So load them afterwards, but

38
00:02:36,590 --> 00:02:40,451
load them before the script tag
where we configured the player.

39
00:02:41,910 --> 00:02:46,980
And similarly,
we want to load the plugin CSS after

40
00:02:46,980 --> 00:02:49,350
the mediaelement player css is loaded.

41
00:02:50,840 --> 00:02:55,490
So, in our project here,
I'm going to do all of that.

42
00:02:57,010 --> 00:02:59,940
Loading the three files right here.

43
00:02:59,940 --> 00:03:04,785
So, that's under our mediaelementplayer
JavaScript in CSS, but

44
00:03:04,785 --> 00:03:09,030
before the main.css,
that's our custom styles.

45
00:03:09,030 --> 00:03:12,960
And of course at the bottom is this
script tag, so we're well above that.

46
00:03:14,440 --> 00:03:20,753
And I'm going to just copy this line,
paste it in, and

47
00:03:20,753 --> 00:03:25,850
then I'll make it point to our JavaScript.

48
00:03:25,850 --> 00:03:35,616
Skip back.min.js.

49
00:03:35,616 --> 00:03:42,645
And we'll point to the I18n file.

50
00:03:42,645 --> 00:03:50,855
And then we will grab the css link and
paste it in.

51
00:03:56,702 --> 00:04:00,700
Great, so
our plugins files are all loaded.

52
00:04:00,700 --> 00:04:02,540
And I'll just go down to the bottom.

53
00:04:02,540 --> 00:04:06,370
And we need to configure the player
to show our new control.

54
00:04:06,370 --> 00:04:09,640
So we'll have to enter it in this array.

55
00:04:09,640 --> 00:04:14,814
And I'll just show you,
if I go back to the main page for

56
00:04:14,814 --> 00:04:19,120
MediaElement.js and go to API

57
00:04:20,980 --> 00:04:25,240
and go and
look at that list of properties again.

58
00:04:25,240 --> 00:04:26,660
And we can find features.

59
00:04:26,660 --> 00:04:30,840
And I'll just show you that
skipback is all one string.

60
00:04:30,840 --> 00:04:35,310
It's all one without spaces or hyphens.

61
00:04:35,310 --> 00:04:39,480
So that's how we'll enter
it into our array here.

62
00:04:43,490 --> 00:04:44,120
And I'll save it.

63
00:04:46,030 --> 00:04:52,000
And if we go to the browser and
refresh, we get our new control now.

64
00:04:52,000 --> 00:04:55,910
Now, it is a 30 second skip back,
and that's by default.

65
00:04:55,910 --> 00:04:58,910
So, to change that,
we'll have to configure this control.

66
00:05:00,450 --> 00:05:06,800
And I'll just show you in
the plug-ins page again.

67
00:05:06,800 --> 00:05:11,550
If we go back down to available
plug-ins and click on Skip Back,

68
00:05:12,980 --> 00:05:17,440
here is how to configure that
control Skip Back interval.

69
00:05:17,440 --> 00:05:22,650
And it takes a number, and
defaults to 30 so we'll make that 4.

70
00:05:22,650 --> 00:05:27,260
So I'll just copy this, and

71
00:05:27,260 --> 00:05:32,025
if I hit a comma and paste it in, and

72
00:05:32,025 --> 00:05:36,240
type 4, that should configure it.

73
00:05:36,240 --> 00:05:41,568
So let's save that, and I'll switch
over to the browser and refresh.

74
00:05:41,568 --> 00:05:45,036
And you can see we have
a four second skip back.

75
00:05:45,036 --> 00:05:49,120
And I'll just jump to the middle here and
we can see it skip back four seconds.

76
00:05:49,120 --> 00:05:50,600
That's great.

77
00:05:50,600 --> 00:05:52,423
And it works for the audio as well.

78
00:05:56,605 --> 00:06:02,280
So great, that's the basics of
using the Media Element Player.

79
00:06:02,280 --> 00:06:03,950
Experiment with it.

80
00:06:03,950 --> 00:06:05,880
You could add more controls, for example.

81
00:06:05,880 --> 00:06:10,551
You could use other plugins, or
even style a player with CSS.

82
00:06:10,551 --> 00:06:11,300
Have fun.