Giters

halkibsi / videojs-youtube

Support YouTube source for Video.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Now fully support VideoJS 4.3.0!

Video.js - YouTube Source Support

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.

Install

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.

How does it work?

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:

Here is 3 examples:

  1. using autoplay/loop/muted
  2. using YouTube controls
  3. 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>

Additional Options

ytcontrols: Display the YouTube controls instead of Video.js. quality: Set the default video quality (1080p, 720p, 480p, 360p, 240p, 144p)

Safari Glitch

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

About

Support YouTube source for Video.js