UNPKG

4.32 kBMarkdownView Raw
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
6You 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
9Use 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
35See the examples folder for more
36
37## How does it work?
38Including 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
40It 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
47It 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
62Because `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
77If 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
92Thanks to Steve Heffernan for the amazing Video.js and to John Hurliman for the original version of the YouTube tech
93
94## License
95The MIT License (MIT)
96
97Copyright (c) Benoit Tremblay <trembl.ben@gmail.com> and videojs-youtube contributors
98
99Permission is hereby granted, free of charge, to any person obtaining a copy
100of this software and associated documentation files (the "Software"), to deal
101in the Software without restriction, including without limitation the rights
102to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
103copies of the Software, and to permit persons to whom the Software is
104furnished to do so, subject to the following conditions:
105
106The above copyright notice and this permission notice shall be included in
107all copies or substantial portions of the Software.
108
109THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
110IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
111FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
112AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
113LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
114OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
115THE SOFTWARE.