@l5i/dashjs/src/streaming/MediaPlayerFactory.js

A reference client implementation for the playback of MPEG DASH via Javascript and compliant browsers.

import MediaPlayer from './MediaPlayer';

function MediaPlayerFactory() {
    /**
     * mime-type identifier for any source content to be accepted as a dash manifest by the create() method.
     * @type {string}
     */
    const SUPPORTED_MIME_TYPE = 'application/dash+xml';

    let logger;

    /**
     *  A new MediaPlayer is instantiated for the supplied videoElement and optional source and context.  If no context is provided,
     *  a default DashContext is used. If no source is provided, the videoElement is interrogated to extract the first source whose
     *  type is application/dash+xml.
     * The autoplay property of the videoElement is preserved. Any preload attribute is ignored. This method should be called after the page onLoad event is dispatched.
     * @param {HTMLMediaElement} video
     * @param {HTMLSourceElement} source
     * @param {Object} context
     * @returns {MediaPlayer|null}
     */
    function create(video, source, context) {
        if (!video || !(/^VIDEO$/i).test(video.nodeName)) return null;

        if (video._dashjs_player) return video._dashjs_player;

        let player;
        let videoID = (video.id || video.name || 'video element');

        source = source || [].slice.call(video.querySelectorAll('source')).filter(function (s) {
                return s.type == SUPPORTED_MIME_TYPE;
            })[0];
        if (!source && video.src) {
            source = document.createElement('source');
            source.src = video.src;
        } else if (!source && !video.src) {
            return null;
        }

        context = context || {};
        player = MediaPlayer(context).create();
        player.initialize(video, source.src, video.autoplay);

        if (!logger) {
            logger = player.getDebug().getLogger();
        }
        logger.debug('Converted ' + videoID + ' to dash.js player and added content: ' + source.src);

        // Store a reference to the player on the video element so it can be gotten at for debugging and so we know its
        // already been setup.
        video._dashjs_player = player;

        return player;
    }

    /**
     * Searches the provided scope for all instances of the indicated selector. If no scope is provided, document is used. If no selector is
     * specified, [data-dashjs-player] is used. The declarative setup also looks for source elements with the type attribute set to 'application/dash+xml'.
     * It then looks for those video elements which have a source element defined with a type matching 'application/dash+xml'.
     * A new MediaPlayer is instantiated for each matching video element and the appropriate source is assigned.
     * The autoplay property of the video element is preserved. Any preload attribute is ignored. This method should be called after the page onLoad event is dispatched.
     * Returns an array holding all the MediaPlayer instances that were added by this method.
     * @param {string} selector - CSS selector
     * @param {Object} scope
     * @returns {Array} an array of MediaPlayer objects
     */
    function createAll(selector, scope) {
        let aPlayers = [];
        selector = selector || '[data-dashjs-player]';
        scope = scope || document;
        let videos = scope.querySelectorAll(selector);
        for (let i = 0; i < videos.length; i++) {
            let player = create(videos[i], null);
            aPlayers.push(player);
        }

        let sources = scope.querySelectorAll('source[type="' + SUPPORTED_MIME_TYPE + '"]');
        for (let i = 0; i < sources.length; i++) {
            let video = findVideo(sources[i]);
            let player = create(video, null);
            aPlayers.push(player);
        }

        return aPlayers;
    }

    function findVideo(el) {
        if ((/^VIDEO$/i).test(el.nodeName)) {
            return el;
        } else {
            return findVideo(el.parentNode);
        }
    }

    return {
        create: create,
        createAll: createAll
    };
}

let instance = MediaPlayerFactory();
let loadInterval;

function loadHandler() {
    window.removeEventListener('load', loadHandler);
    instance.createAll();
}

function loadIntervalHandler() {
    if (window.dashjs) {
        window.clearInterval(loadInterval);
        instance.createAll();
    }
}

let avoidAutoCreate = typeof window !== 'undefined' && window && window.dashjs && window.dashjs.skipAutoCreate;

if (!avoidAutoCreate && typeof window !== 'undefined' && window && window.addEventListener) {
    if (window.document.readyState === 'complete') {
        if (window.dashjs) {
            instance.createAll();
        } else {
            // If loaded asynchronously, window.readyState may be 'complete' even if dashjs hasn't loaded yet
            loadInterval = window.setInterval(loadIntervalHandler, 500);
        }
    } else {
        window.addEventListener('load', loadHandler);
    }
}

export default instance;