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.