Skip to content
Plugin for VideoJS to render YouTube annotations.
JavaScript Shell
Branch: master
Clone or download
afrmtbl Merge pull request #2 from omarroth/fix-resize
Use 'playerresize' for updating annotations
Latest commit 2204417 Apr 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.editorconfig
.gitignore
.gitmodules
LICENSE
README.md
build.sh

README.md

videojs-youtube-annotations

Plugin for VideoJS to render YouTube annotations.

Usage

HTML

<!-- VideoJS automatically places the video in a <div id="avideo"></div> -->
<video id="avideo" class="video-js"></video>
<!-- include the styles -->
<link rel="stylesheet" type="text/css" href="dist.min.css">

Javascript

const annotationXml = `
<?xml version="1.0" encoding="UTF-8" ?>
<document>
    <annotations> ... </annotations>
</document>`;

const video = videojs("avideo");
const videoContainer = document.getElementById("avideo");
video.ready(() => {
    videojs.registerPlugin("youtubeAnnotationsPlugin", youtubeAnnotationsPlugin);
    video.youtubeAnnotationsPlugin({annotationXml, videoContainer});
});

Click Events

Each time an annotation that has a link attached to it is clicked, the event __ar_annotation_click is fired on window, with e.detail.url set to the url.

e.detail also includes seconds if the link that was clicked on is a video with a timestamp hash (#t=38s).

window.addEventListener("__ar_annotation_click", e => {
    const url = e.detail.url;
    // redirect to the url
    window.location.href = url;
    // or provide a custom redirect
    // window.location.href = `www.example.com/redirect?url=${url}`;
});
You can’t perform that action at this time.