1 | # YouTube Playback Technology<br />for [Video.js](https://github.com/videojs/video.js)
|
2 |
|
3 | [![Greenkeeper badge](https://badges.greenkeeper.io/videojs/videojs-youtube.svg)](https://greenkeeper.io/)
|
4 |
|
5 | ## Install
|
6 | You can use bower (`bower install videojs-youtube`), npm (`npm install videojs-youtube`) or the source and build it using `npm run build`. Then, the only file you need is dist/Youtube.min.js.
|
7 |
|
8 | ## Version Note
|
9 | Use branch `vjs4` if you still using old VideoJS `v4.x`.
|
10 |
|
11 | ## Example
|
12 | ```html
|
13 | <!DOCTYPE html>
|
14 | <html>
|
15 | <head>
|
16 | <link type="text/css" rel="stylesheet" href="../node_modules/video.js/dist/video-js.min.css" />
|
17 | </head>
|
18 | <body>
|
19 | <video
|
20 | id="vid1"
|
21 | class="video-js vjs-default-skin"
|
22 | controls
|
23 | autoplay
|
24 | width="640" height="264"
|
25 | data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }'
|
26 | >
|
27 | </video>
|
28 |
|
29 | <script src="../node_modules/video.js/dist/video.min.js"></script>
|
30 | <script src="../dist/Youtube.min.js"></script>
|
31 | </body>
|
32 | </html>
|
33 | ```
|
34 |
|
35 | See the examples folder for more
|
36 |
|
37 | ## How does it work?
|
38 | Including the script Youtube.min.js will add the YouTube as a tech. You just have to add it to your techOrder option. Then, you add the option src with your YouTube URL.
|
39 |
|
40 | It supports:
|
41 | - youtube.com as well as youtu.be
|
42 | - Regular URLs: http://www.youtube.com/watch?v=xjS6SftYQaQ
|
43 | - Embeded URLs: http://www.youtube.com/embed/xjS6SftYQaQ
|
44 | - Playlist URLs: http://www.youtube.com/playlist?list=PLA60DCEB33156E51F OR http://www.youtube.com/watch?v=xjS6SftYQaQ&list=SPA60DCEB33156E51F
|
45 |
|
46 | ## Options
|
47 | It supports every regular Video.js options. Additionally, you can change any [YouTube parameter](https://developers.google.com/youtube/player_parameters?hl=en#Parameters). Here is an example of setting the `iv_load_policy` parameter to `1`.
|
48 |
|
49 | ```html
|
50 | <video
|
51 | id="vid1"
|
52 | class="video-js vjs-default-skin"
|
53 | controls
|
54 | autoplay
|
55 | width="640" height="264"
|
56 | data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], "youtube": { "iv_load_policy": 1 } }'
|
57 | >
|
58 | </video>
|
59 | ```
|
60 |
|
61 | ### YouTube controls
|
62 | Because `controls` is already a Video.js option, to use the YouTube controls, you must set the `ytControls` parameter.
|
63 |
|
64 | ```html
|
65 | <video
|
66 | id="vid1"
|
67 | class="video-js vjs-default-skin"
|
68 | controls
|
69 | autoplay
|
70 | width="640" height="264"
|
71 | data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], "youtube": { "ytControls": 2 } }'
|
72 | >
|
73 | </video>
|
74 | ```
|
75 |
|
76 | ### Custom Player Options
|
77 | If you need to set any additional options on the YouTube player, you may do so with the `customVars` parameter:
|
78 |
|
79 | ```html
|
80 | <video
|
81 | id="vid1"
|
82 | class="video-js vjs-default-skin"
|
83 | controls
|
84 | autoplay
|
85 | width="640" height="264"
|
86 | data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], "youtube": { "customVars": { "wmode": "transparent" } } }'
|
87 | >
|
88 | </video>
|
89 | ```
|
90 |
|
91 | ## Special Thank You
|
92 | Thanks to Steve Heffernan for the amazing Video.js and to John Hurliman for the original version of the YouTube tech
|
93 |
|
94 | ## License
|
95 | The MIT License (MIT)
|
96 |
|
97 | Copyright (c) Benoit Tremblay <trembl.ben@gmail.com> and videojs-youtube contributors
|
98 |
|
99 | Permission is hereby granted, free of charge, to any person obtaining a copy
|
100 | of this software and associated documentation files (the "Software"), to deal
|
101 | in the Software without restriction, including without limitation the rights
|
102 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
103 | copies of the Software, and to permit persons to whom the Software is
|
104 | furnished to do so, subject to the following conditions:
|
105 |
|
106 | The above copyright notice and this permission notice shall be included in
|
107 | all copies or substantial portions of the Software.
|
108 |
|
109 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
110 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
111 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
112 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
113 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
114 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
115 | THE SOFTWARE.
|