Skip to content

ginpei/html5-youtube.js

Repository files navigation

Note: "youtube.js" has been renamed "html5-youtube.js".

html5-youtube.js

YouTube Player API wrapper like HTML5 video API.

Usage

Basic

See examples/basic.html.

<div id="my-youtube-player" data-youtube-videoid="KFstP0C9sVk"></div>
var elPlayer = document.getElementById('my-youtube-player');

youtube({ el:elPlayer });

Player

See examples/player.html.

<div class="js-player"></div>
<div>
    <button class="js-play" disabled>Play</button>
    <button class="js-pause" disabled>Pause</button>
</div>
(function() {
    var elPlayer = document.querySelector('.js-player');
    var elPlay = document.querySelector('.js-play');
    var elPause = document.querySelector('.js-pause');
    var videoId = 'KFstP0C9sVk';

    var player = youtube({ el:elPlayer, id:videoId })
        .on('ready', function(event) {
            player.play();
        })
        .on('play', function(event) {
            elPlay.disabled = true;
            elPause.disabled = false;
        })
        .on('pause', function(event) {
            elPlay.disabled = false;
            elPause.disabled = true;
        })
        .on('ended', function(event) {
            player.play();
        });

    elPlay.addEventListener('click', function(event) {
        player.play();
    });
    elPause.addEventListener('click', function(event) {
        player.pause();
    });
})();

References

Interface

youtube(options)

  • options.el ... {Element} element that will be replaced with YouTube Player.
  • options.id ... {String} video ID like "KFstP0C9sVk".

Additionally, every Youtube Player Parameters can be passed as options. Check the Youtube documentation for the full list

Those options accepts the values stated in the youtube documentation, but can also accept booleans in place of 1 (true) and 0 (false). Some player parameters exemples :

  • options.autoplay ... {Boolean | 0 or 1} start playing automatically if true or 0. Optional. Default is 0.
  • options.controls ... {Boolean | 0 or 1} show controll UIs if true. Optional. Default is 1.
  • options.disabledkb ... {Boolean | 0 or 1} enable or disabled keyboard control. Optional. Default is 0.
  • options.start ... {Number} specify a start time for the video. Optional. Default is undefined.
  • options.end ... {Number} specify a start time for the video. Optional. Default is undefined.
  • options.showInfo ... {Boolean | 0 or 1} show video info (title, author...). Optional. Default is 1.
  • returns ... {Player}
var el = document.querySelector('#the-player');
var videoId = 'KFstP0C9sVk';
var player = youtube({ el:el, id:videoId });
player.addEventListener('ready', function(event) {
    this.play();
});

Methods

play()

Start playing a video.

pause()

Stop playing a video.

addEventListener(type, listener)

Set an event listener.

  • type ... {string} event name.
  • listener ... {Function} event listener.

removeEventListener(type, listener)

Remove an event listener.

  • type ... {string} event name.
  • listener ... {Function} event listener.

on(type, listener)

Shortcut for addEventListener(). This method is chainable.

  • type ... {string} event name.
  • listener ... {Function} event listener.
  • returns ... {Player}

off(type, listener)

Shortcut for removeEventListener(). This method is chainable.

  • type ... {string} event name.
  • listener ... {Function} event listener.
  • returns ... {Player}

destroy()

Remove player.

The target element is restored, event listeners are detached, player properties are cleared.

Properties

player

Original YouTube Player object.

  • type ... YT.Player

duration

How long time in seconds of the currently playing video.

  • type ... Number

currentSrc

YouTube.com URL for the currently loaded/playing video.

  • type ... String

paused

True if playback is paused; false otherwise.

  • type ... Boolean

ended

True if playback has reached the end

  • type ... Boolean

Functional Properties

Properties are implemented as getter and setter functions.

var currentTime = player.currentTime;  // getter
player.currentTime = 123;  // setter

If you use youtube.compat.js, these getter and setter are changed to just functions.

var currentTime = player.currentTime();  // getter
player.currentTime(123);  // setter

currentTime

  • type ... Number

Returns the current playback position, in seconds, as a position between zero time and the current duration.

Can be set, to seek to the given time.

Updated with progress.

volume

  • type ... Number

Returns the current playback volume multiplier, as a number in the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the loudest.

Can be set, to change the volume multiplier.

muted

  • type ... Boolean

Returns true if all audio is muted (regardless of other attributes either on the controller or on any media elements slaved to this controller), and false otherwise.

Can be set, to change whether the audio is muted or not.

playbackRate

  • type ... Number

Returns the current rate of playback.

Can be set, to change the rate of playback.

This value is NOT available in compat mode. (Always 1)

src

YouTube.com URL for the loaded/playing video.

Can be set, to change the video.

  • type ... String

Events

Type When
ready The player is ready to use.
error Any error is occurred.
emptied The video is refreshed.
canplay The video is ready to play.
canplaythrough The video is ready to play.
playing Started playing.
ended Finished playing.
durationchange Duration is changed.
timeupdate Current playback time is changed.
play Started playing.
pause Stopped playing.
ratechange Playback rate is changed.
volumechange Volume is changed, muted or unmuted.

Compatibility With HTML5 Video API

  • ✔ = Compatible (or almost)
  • △ = Similar (but not compatible)
  • ✘ = Not supported
  • ☆ = Original feature
  • ? = Ah, let me see...
Function Status Description
addEventListener()
destroy()
off() Simple shortcut for removeEventListener()
on() Simple shortcut for addEventListener()
pause()
play()
removeEventListener()
currentSrc
currentTime
duration
ended
muted
paused
playbackRate Only 0.25, 0.5, 1, 1.5, or 2 (Check YouTube API)
player
src
volume
canplay event Same as YouTube onReady event
canplaythrough event Same as YouTube onReady event
durationchange event
emptied event ?
ended event
error event Same as YouTube onError event
muted event
pause event
play event
playing event ?
progress event
ratechange event
ready event
seeked event
seeking event
src event
timeupdate event
volumechange event

Browsers

  • IE 9+
  • Modern PC Browsers

Support IE 7, 8

Use with youtube.compat.js. See examples/full-player.compat.html.

<script src="html5-youtube.js"></script>
<script src="html5-youtube.compat.js"></script>
<script>
var player = youtube({ ... });
</script>

Compatible mode forces some rules.

History

  • 2015-10-04: v1.0.1
    • Update minified files (OMG)
    • Rename from "youtube.js" to "html5-youtube.js"
  • 2015-09-29: v1.0.0
    • First Release

License

  • MIT License

Contact