Allows you to use a YouTube video within Video.js and control it the same way as a regular video (the same methods and events are availables within the tech). It also add the video quality and let you change it as if you were on YouTube.
All you need is vjs.youtube.js. You can install it through bower: bower install videojs-youtube or by simply downloading the last version on GitHub.
Including the script vjs.youtube.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.
It supports:
- youtube.com as well as youtu.be
- Regular URLs: http://www.youtube.com/watch?v=xjS6SftYQaQ
- Embeded URLs: http://www.youtube.com/embed/xjS6SftYQaQ
- Playlist URLs: http://www.youtube.com/playlist?list=PLA60DCEB33156E51F OR http://www.youtube.com/watch?v=xjS6SftYQaQ&list=SPA60DCEB33156E51F
Here is 3 examples:
- using autoplay/loop/muted
- using YouTube controls
- using JavaScript events
<!DOCTYPE html>
<html>
<head>
<link href="video-js.min.css" rel="stylesheet" />
</head>
<body>
<video id="vid1" src="" class="video-js vjs-default-skin" controls
preload="auto" autoplay="autoplay" loop="loop" width="640" height="360"
data-setup='{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }'>
</video>
<br />
<video id="vid2" src="" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="360"
data-setup='{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ", "ytcontrols": true }'>
</video>
<br />
<video id="vid3" src="" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="360">
</video>
<script src="video.min.js"></script>
<script src="vjs.youtube.js"></script>
<script>
videojs('vid3', { "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }).ready(function() {
// Cue a video using ended event
this.one('ended', function() {
this.src('http://www.youtube.com/watch?v=jofNR_WkoCE');
});
});
</script>
</body>
</html>ytcontrols: Display the YouTube controls instead of Video.js. quality: Set the default video quality (1080p, 720p, 480p, 360p, 240p, 144p)
If your video tag is empty (no space or new line before the closing tag), it will create a glitch with Safari. Instead of writing <video ...></video>, you should write <video ...> </video>.
##Special Thank You Thanks to John Hurliman for the original code on the old Video.js