Skip to content
This repository has been archived by the owner on Sep 13, 2023. It is now read-only.

Latest commit

 

History

History
69 lines (56 loc) · 2.63 KB

README.md

File metadata and controls

69 lines (56 loc) · 2.63 KB
Raw

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.

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