plyr/demo/src/js/main.js

// ==========================================================================
// Plyr.io demo
// This code is purely for the plyr.io website
// Please see readme.md in the root or github.com/selz/plyr
// ==========================================================================

/*global plyr*/

// General functions
(function() {
    //document.body.addEventListener('ready', function(event) { console.log(event); });

    // Setup the player
    var instances = plyr.setup({
        debug: true,
        title: "Video demo",
        iconUrl: "../dist/plyr.svg",
        tooltips: {
            controls: true
        },
        captions: {
            defaultActive: true
        }
    });
    plyr.loadSprite("dist/demo.svg");

    // Plyr returns an array regardless
    var player = instances[0];

    // Setup type toggle
    var buttons = document.querySelectorAll("[data-source]"),
        types = {
            video: "video",
            audio: "audio",
            youtube: "youtube",
            vimeo: "vimeo"
        },
        currentType = window.location.hash.replace("#", ""),
        historySupport = window.history && window.history.pushState;

    // Bind to each button
    for (var i = buttons.length - 1; i >= 0; i--) {
        buttons[i].addEventListener("click", function() {
            var type = this.getAttribute("data-source");

            newSource(type);

            if (historySupport) {
                history.pushState({ type: type }, "", "#" + type);
            }
        });
    }

    // List for backwards/forwards
    window.addEventListener("popstate", function(event) {
        if (event.state && "type" in event.state) {
            newSource(event.state.type);
        }
    });

    // On load
    if (historySupport) {
        var video = !currentType.length;

        // If there's no current type set, assume video
        if (video) {
            currentType = types.video;
        }

        // Replace current history state
        if (currentType in types) {
            history.replaceState({ type: currentType }, "", video ? "" : "#" + currentType);
        }

        // If it's not video, load the source
        if (currentType !== types.video) {
            newSource(currentType, true);
        }
    }

    // Toggle class on an element
    function toggleClass(element, className, state) {
        if (element) {
            if (element.classList) {
                element.classList[state ? "add" : "remove"](className);
            } else {
                var name = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + className + " ", "");
                element.className = name + (state ? " " + className : "");
            }
        }
    }

    // Set a new source
    function newSource(type, init) {
        // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
        if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
            return;
        }

        switch (type) {
            case types.video:
                player.source({
                    type: "video",
                    title: "View From A Blue Moon",
                    sources: [
                        {
                            src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",
                            type: "video/mp4"
                        },
                        {
                            src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",
                            type: "video/webm"
                        }
                    ],
                    poster: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",
                    tracks: [
                        {
                            kind: "captions",
                            label: "English",
                            srclang: "en",
                            src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",
                            default: true
                        }
                    ]
                });
                break;

            case types.audio:
                player.source({
                    type: "audio",
                    title: "Kishi Bashi – “It All Began With A Burst”",
                    sources: [
                        {
                            src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",
                            type: "audio/mp3"
                        },
                        {
                            src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",
                            type: "audio/ogg"
                        }
                    ]
                });
                break;

            case types.youtube:
                player.source({
                    type: "video",
                    title: "View From A Blue Moon",
                    sources: [
                        {
                            src: "bTqVqk7FSmY",
                            type: "youtube"
                        }
                    ]
                });
                break;

            case types.vimeo:
                player.source({
                    type: "video",
                    title: "View From A Blue Moon",
                    sources: [
                        {
                            src: "147865858",
                            type: "vimeo"
                        }
                    ]
                });
                break;
        }

        // Set the current type for next time
        currentType = type;

        // Remove active classes
        for (var x = buttons.length - 1; x >= 0; x--) {
            toggleClass(buttons[x].parentElement, "active", false);
        }

        // Set active on parent
        toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, "active", true);
    }
})();

// Google analytics
// For demo site (http://[www.]plyr.io) only
if (document.domain.indexOf("plyr.io") > -1) {
    (function(i, s, o, g, r, a, m) {
        i.GoogleAnalyticsObject = r;
        (i[r] =
            i[r] ||
            function() {
                (i[r].q = i[r].q || []).push(arguments);
            }),
            (i[r].l = 1 * new Date());
        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m);
    })(window, document, "script", "//www.google-analytics.com/analytics.js", "ga");
    ga("create", "UA-40881672-11", "auto");
    ga("send", "pageview");
}