Add annotation player

This addresses issue #110 from master. Yay for adding annotations back!
This commit is contained in:
glmdgrielson 2019-01-20 18:28:28 -05:00 committed by Omar Roth
parent 6d1c150ff5
commit e48a000784
4 changed files with 1101 additions and 1 deletions

View file

@ -213,6 +213,49 @@ if (bpb) {
player.httpSourceSelector();
<% if !params[:listen] %>
var video_container = document.getElementById("player");
let xhr = new XMLHttpRequest();
xhr.responseType = "text";
xhr.timeout = 60000;
xhr.open("GET", "/api/v1/annotations/<%= video.id %>", true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
videojs.registerPlugin("youtubeAnnotationsPlugin", youtubeAnnotationsPlugin);
if (!player.paused()) {
player.youtubeAnnotationsPlugin({annotationXml: xhr.response, videoContainer: video_container});
} else {
player.one('play', function(event) {
player.youtubeAnnotationsPlugin({annotationXml: xhr.response, videoContainer: video_container});
});
}
}
}
};
window.addEventListener("__ar_annotation_click", e => {
const { url, target, seconds } = e.detail;
var path = new URL(url);
if (path.href.startsWith("https://www.youtube.com/watch?") && seconds) {
path.search += "&t=" + seconds;
}
path = path.pathname + path.search;
if (target === "current") {
window.location.href = path;
}
else if (target === "new") {
window.open(path, "_blank");
}
});
<% end %>
// Since videojs-share can sometimes be blocked, we try to load it last
player.share(shareOptions);
</script>

View file

@ -2,13 +2,14 @@
<link rel="stylesheet" href="/css/videojs-http-source-selector.css">
<link rel="stylesheet" href="/css/videojs.markers.min.css">
<link rel="stylesheet" href="/css/videojs-share.css">
<link rel="stylesheet" href="/css/videojs-youtube-annotations.css">
<script src="/js/video.min.js"></script>
<script src="/js/videojs-contrib-quality-levels.min.js"></script>
<script src="/js/videojs-http-source-selector.min.js"></script>
<script src="/js/videojs.hotkeys.min.js"></script>
<script src="/js/videojs-markers.min.js"></script>
<script src="/js/videojs-share.min.js"></script>
<script src="/js/videojs-youtube-annotations.js"></script>
<% if params[:quality] != "dash" %>
<link rel="stylesheet" href="/css/quality-selector.css">
<script src="/js/silvermine-videojs-quality-selector.min.js"></script>