UNPKG

3.65 kBMarkdownView Raw
1# YouTube Playback Technology<br />for [Video.js](https://github.com/videojs/video.js)
2
3## Install
4You 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.
5
6## Example
7```html
8<!DOCTYPE html>
9<html>
10<head>
11 <link type="text/css" rel="stylesheet" href="../node_modules/video.js/dist/video-js.min.css" />
12</head>
13<body>
14 <video
15 id="vid1"
16 class="video-js vjs-default-skin"
17 controls
18 autoplay
19 width="640" height="264"
20 data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }'
21 >
22 </video>
23
24 <script src="../node_modules/video.js/dist/video.min.js"></script>
25 <script src="../dist/Youtube.min.js"></script>
26</body>
27</html>
28```
29
30See the examples folder for more
31
32## How does it work?
33Including 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.
34
35It supports:
36- youtube.com as well as youtu.be
37- Regular URLs: http://www.youtube.com/watch?v=xjS6SftYQaQ
38- Embeded URLs: http://www.youtube.com/embed/xjS6SftYQaQ
39- Playlist URLs: http://www.youtube.com/playlist?list=PLA60DCEB33156E51F OR http://www.youtube.com/watch?v=xjS6SftYQaQ&list=SPA60DCEB33156E51F
40
41## Options
42It 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`.
43
44```html
45<video
46 id="vid1"
47 class="video-js vjs-default-skin"
48 controls
49 autoplay
50 width="640" height="264"
51 data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], "youtube": { "iv_load_policy": 1 } }'
52>
53</video>
54```
55
56### YouTube controls
57Because `controls` is already a Video.js option, to use the YouTube controls, you must set the `ytControls` parameter.
58
59```html
60<video
61 id="vid1"
62 class="video-js vjs-default-skin"
63 controls
64 autoplay
65 width="640" height="264"
66 data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], "youtube": { "ytControls": 2 } }'
67>
68</video>
69```
70
71##Special Thank You
72Thanks to Steve Heffernan for the amazing Video.js and to John Hurliman for the original version of the YouTube tech
73
74## License
75The MIT License (MIT)
76
77Copyright (c) 2014-2015 Benoit Tremblay <trembl.ben@gmail.com>
78
79Permission is hereby granted, free of charge, to any person obtaining a copy
80of this software and associated documentation files (the "Software"), to deal
81in the Software without restriction, including without limitation the rights
82to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
83copies of the Software, and to permit persons to whom the Software is
84furnished to do so, subject to the following conditions:
85
86The above copyright notice and this permission notice shall be included in
87all copies or substantial portions of the Software.
88
89THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
90IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
91FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
92AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
93LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
94OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
95THE SOFTWARE.