videopdf/static/videoOverlay.js

function getVideoOverlay(page) {
    var PLAY_BUTTON='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjNDA0MDQwIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJkZWZhdWx0IiwibmFtZSI6InN5bWJvbFBsYXkiLCJ0aGVtZSI6Im94bGlnaHQifS0tPg==';
    function playButton(height) {
        var img = document.createElement('img');
        img.src = PLAY_BUTTON;
        img.style.cssText = "position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;opacity:0.8;height: "+height+"px;width: auto";
        img.title = 'Click to play';
        return img;
    }
    return videoOverlay[page] ? {
        beginLayout: function() {
          this.counter = 0;
          //console.log('lets beging');
        },
        endLayout: function() {
          //console.log('lets end it here');
        },
        appendImage: function(image) {
            this.counter++;
            var id = this.counter;
            if (videoOverlay[page][id]) {
                console.log('add image', image, this);
                var div = document.createElement('div');
                div.style.cssText = "position: relative; width: "
                  + image.width + "px;height: "
                  + image.height + "px;top:"
                  + image.top + "px;left:"
                  + image.left + "px;";
                div.appendChild(playButton(image.height/1.5));
                div.onclick = function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    div.innerHTML =  videoOverlay[page][id];
                    div.style.opacity = 1;
                    return false;
                };
                this.div.appendChild(div);
            }
        }
    } : null;
}