Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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}`;
});

About

Plugin for VideoJS to render YouTube annotations.

Resources

License

Releases

No releases published

Packages

No packages published