var title,
    // data structures
    classes = {thisClass: [], parentClass: []},
    // paths
    classFilePath,
    parentClassFilePath,
    // elements
    mainContent,
    main,
    doc_body;

/**
 * tests for all the ways a variable might be undefined or not have a value
 *
 * @param {*} x - the variable to test
 * @return {Boolean} true if variable is defined and has a value
 */
function isDefined(x) {
    if (x === '' || x === null || x === undefined || x === NaN) {
        return false;
    }
    return true;
};
/**
 * determines whether specified item is in an array
 *
 * @param {array} arr - array to check
 * @param {string} item - to check for
 * @return {boolean} true if item is in the array, else false
 */
function isItemInArray(arr, item) {
    var i,
        iMax = arr.length;
    for (i = 0; i < iMax; i++) {
        if (arr[i] === item) {
            return true;
        }
    }
    return false;
};
/**
 * get a copy of (rather than reference to) an object
 *
 * @param  {object} obj - the object you want a copy
 * @return {object} the copy
 */
function copyObj(obj) {
    if (isDefined(obj)) {
        return JSON.parse(JSON.stringify(obj));
    }
    return null;
};
/**
 * find index of an object in array of objects
 * based on some property value
 * generally useful for finding a unique object
 *
 * @param {array} targetArray - array to search
 * @param {string} objProperty - object property to search
 * @param {string|number} value - value of the property to search for
 * @return {integer} index of first instance if found, otherwise returns -1
 */
function findObjectInArray(targetArray, objProperty, value) {
    var i, totalItems = targetArray.length, objFound = false;
    for (i = 0; i < totalItems; i++) {
        if (targetArray[i][objProperty] === value) {
            objFound = true;
            return i;
        }
    }
    if (objFound === false) {
        return -1;
    }
};
/**
 * find indexes of a set of object in array of objects
 * based on some property value
 * generally useful for finding several objects
 *
 * @param {array} targetArray - array to search
 * @param {string} objProperty - object property to search
 * @param {string|number} value - value of the property to search for
 * @return {array} array of indexes for matching objects
 */
function findObjectsInArray(targetArray, objProperty, value) {
    var i, totalItems = targetArray.length, newArr = [];
    for (i = 0; i < totalItems; i++) {
        if (targetArray[i][objProperty] === value) {
            newArr.push(i);
        }
    }
    return newArr;
};
/**
 * get a subset of objects in array of objects
 * based on some property value
 *
 * @param {array} targetArray - array to search
 * @param {string} objProperty - object property to search
 * @param {string|number} value - value of the property to search for
 * @return {array} array of objects with matching property value
 */
function getSubArray(targetArray, objProperty, value) {
    var i, totalItems = targetArray.length, idxArr = [];
    for (i = 0; i < totalItems; i++) {
        if (targetArray[i][objProperty] === value) {
            idxArr.push(targetArray[i]);
        }
    }
    return idxArr;
};
/**
 * sort an array of objects based on an object property
 *
 * @param {array} targetArray - array to sort
 * @param {string} objProperty - property whose value to sort on
 * @return {array} the sorted array
 */
function sortArray(targetArray, objProperty) {
    targetArray.sort(function (a, b) {
        var propA = a[objProperty].toLowerCase(), propB = b[objProperty].toLowerCase();
        // sort ascending; reverse propA and propB to sort descending
        if (propA < propB) {
            return -1;
        } else if (propA > propB) {
            return 1;
        }
        return 0;
    });
    return targetArray;
};
/**
 * create an element
 *
 * @param  {string} type - the element type
 * @param  {object} attributes - attributes to add to the element
 * @return {object} the HTML element
 */
function createEl(type, attributes) {
    var el;
    if (isDefined(type)) {
        el = doc.createElement(type);
        if (isDefined(attributes)) {
            var attr;
            for (attr in attributes) {
                el.setAttribute(attr, attributes[attr]);
            }
        }
        return el;
    }
};
/**
 * creates a text node and adds it to an element
 * @param {object|node} el - the node (element) to add the text to
 * @param {string} str - the text to add
 */
function addText(el, str) {
    var text = doc.createTextNode(str);
    el.appendChild(text);
};
/**
 * finds the objects in the doc data for a fileName
 *
 * @param {array} arr - the array of objects to search
 * @param {string} filename - the filename to look for in the meta object
 * @return {array} - array of the objects found
 */
function findClassObjects(arr, filename) {
    var i, totalItems = arr.length, newArr = [];
    for (i = 0; i < totalItems; i++) {
        if (isDefined(arr[i].meta)) {
            if (arr[i].meta.filename === filename) {
                newArr.push(arr[i]);
            }
        }

    }
    return newArr;

};
/**
 * add the class header content
 */
function addHeaderContent() {
    var topSection = createEl('section', {id: 'top', class: 'section'}),
        headerData = doc_data.thisClass.headerInfo,
        header = createEl('h1'),
        extendsNode = createEl('p'),
        extendsLink,
        definedIn = createEl('p'),
        definedInLink = createEl('a', {href: docsPath + classFilePath + '#L' + headerData.meta.lineno}),
        description = createEl('div', {style: 'border:none', id: 'classDescription'}),
        descriptionEl,
        constructorHeader = createEl('h3'),
        constructorPre = createEl('pre'),
        constructorCode = createEl('code'),
        constructorParamsHeader = createEl('h4'),
        constructorParams = [],
        text;
    // add main content wrapper
    doc_body.appendChild(mainContent);
    main = doc.getElementById('main');
    // add elements
    topSection.appendChild(header);
    topSection.appendChild(description);
    // source file
    topSection.appendChild(definedIn);
    addText(definedIn, 'DEFINED IN: ');
    definedIn.appendChild(definedInLink);
    addText(definedInLink, headerData.meta.filename + ' line number: ' + headerData.meta.lineno);
    mainContent.appendChild(topSection);
    // page header
    addText(header, headerData.name);
    // parent info if this class extends another
    if (isDefined(doc_data.parentClasses)) {
        topSection.appendChild(extendsNode);
        addText(extendsNode, 'EXTENDS: ');
        extendsLink = createEl('a', {href: parentClassFilePath + doc_data.parentClasses[0].headerInfo.meta.filename});
        extendsNode.appendChild(extendsLink);
        addText(extendsLink, doc_data.parentClasses[0].headerInfo.meta.filename);
    }
    // constructor info - don't add for video.js
    if (doc_data.thisClass.headerInfo.name !== 'videojs') {
        topSection.appendChild(constructorHeader);
        topSection.appendChild(constructorPre);
        constructorPre.appendChild(constructorCode);
        // create the constructor info
        addText(constructorHeader, 'Constructor');

        // get constructor params if any
        if (isDefined(headerData.params)) {
            var paramTableHeaders = ['name', 'Type', 'Required', 'Description'],
                paramTable = createEl('table'),
                paramThead = createEl('thead'),
                paramTbody = createEl('tbody'),
                paramTheadRow = createEl('tr'),
                paramTbodyRow = createEl('tr'),
                paramTH,
                paramTD,
                k,
                kMax;

            addText(constructorParamsHeader, 'Parameters');
            paramTable.appendChild(paramThead);
            paramTable.appendChild(paramTbody);
            paramThead.appendChild(paramTheadRow);
            // set the table headers
            kMax = paramTableHeaders.length;
            for (k = 0; k < kMax; k++) {
                paramTH = createEl('th');
                paramTheadRow.appendChild(paramTH);
                addText(paramTH, paramTableHeaders[k]);
            }
            // now the table info
            kMax = headerData.params.length;
            for (k = 0; k < kMax; k++) {
                paramTbodyRow = createEl('tr');
                paramTbody.appendChild(paramTbodyRow);
                paramTD = createEl('td');
                addText(paramTD, headerData.params[k].name);
                paramTbodyRow.appendChild(paramTD);
                paramTD = createEl('td');
                addText(paramTD, headerData.params[k].type.names.join('|'));
                paramTbodyRow.appendChild(paramTD);
                paramTD = createEl('td');
                if (headerData.params[k].optional) {
                    text = doc.createTextNode('no');
                    constructorParams.push('[' + headerData.params[k].name + ']');
                } else {
                    text = doc.createTextNode('yes');
                    constructorParams.push(headerData.params[k].name);
                }
                paramTD.appendChild(text);
                if (isDefined(headerData.params[k].description)) {
                    paramTbodyRow.appendChild(paramTD);
                    paramTD = createEl('td');
                    addText(paramTD, headerData.params[k].description.slice(3, headerData.params[k].description.indexOf('</p>')));
                    paramTbodyRow.appendChild(paramTD);
                }
                paramTbody.appendChild(paramTbodyRow);
            }
            topSection.appendChild(constructorParamsHeader);
            topSection.appendChild(paramTable);
        }
    }
    // add constructor params to signature if any
    if (constructorParams.length > 0) {
        text = doc.createTextNode(headerData.name + '( ' + constructorParams.join(',') + ' )');
    } else {
        text = doc.createTextNode(headerData.name + '()');
    }
    constructorCode.appendChild(text);
    descriptionEl = doc.getElementById('classDescription');
    descriptionEl.innerHTML = headerData.description;
};
/**
 * add the side nav
 */
function addIndex() {
    var section = createEl('section', {id: 'index', class: 'side-nav'}),
        navHeader = createEl('h2', {class: 'sideNavHeader'}),
        navHeaderLink = createEl('a', {href: 'index.html'}),
        memberIndex = createEl('div', {id: 'memberIndex', class: 'member-index'}),
        thisMember,
        addedMembers = {},
        item,
        thisParent,
        parentList,
        header,
        listItem,
        listLink,
        classHeader,
        parentHeader,
        i,
        iMax,
        j,
        jMax,
        // helper functions
        classHasMembers = function (member) {
            if (doc_data.thisClass[member].length > 0) {
                return true;
            }
            return false;
        },
        parentsHaveMembers = function () {
            if (doc_data.parentClasses.length > 0) {
                for (i = 0; i < doc_data.parentClasses.length; i++) {
                    if (doc_data.parentClasses[i][thisMember].length > 0) {
                        return true;
                    }
                }
                return false;
            }
        },
        makeList = function (classArr, parentArr, member, list) {
            thisMember = member.toLowerCase();
            if (classArr.length > 0 || (isDefined(doc_data.parentClass) && parentArr.length > 0)) {
                // add member list header
                if (classHasMembers(thisMember) || parentsHaveMembers(thisMember)) {
                    header = createEl('h3');
                    addText(header, doc_data.thisClass.headerInfo.name + ' ' + member);
                } else {
                    return;
                }
                if (classHasMembers(thisMember)) {
                    classHeader = createEl('h4');
                    addText(classHeader, 'Class ' + member);
                    memberIndex.appendChild(header);
                    memberIndex.appendChild(classHeader);
                    // add the list & items
                    list = createEl('ul', {id: list});
                    memberIndex.appendChild(list);
                    iMax = classArr.length;
                    for (i = 0; i < iMax; i++) {
                        item = classArr[i].name;
                        if (!isItemInArray(addedMembers[member], item)) {
                            // keep track of added members to remove overridden ones
                            addedMembers[member].push(item);
                            listItem = createEl('li');
                            listLink = createEl('a', {href: '#' + member + item});
                            addText(listLink, item);
                            listItem.appendChild(listLink);
                            list.appendChild(listItem);
                        }
                    }
                }

                // add inherited items if any
                if (isDefined(parentArr) && parentArr.length > 0) {
                    jMax = parentArr.length;
                    for (j = 0; j < jMax; j++) {
                        thisParent = parentArr[j];
                        if (thisParent[thisMember].length > 0) {
                            parentHeader = createEl('h4');
                            addText(parentHeader, 'Inherited ' + member + ' from ' + thisParent.headerInfo.name);
                            memberIndex.appendChild(parentHeader);
                            parentList = createEl('ul');
                            memberIndex.appendChild(parentList);
                            iMax = thisParent[thisMember].length;
                            for (i = 0; i < iMax; i++) {
                                item = thisParent[thisMember][i].name;
                                if (!isItemInArray(addedMembers[member], item)) {
                                    addedMembers[member].push(item);
                                    listItem = createEl('li');
                                    listLink = createEl('a', {href: '#' + member + item});
                                    listItem.appendChild(listLink);
                                    addText(listLink, item);
                                    parentList.appendChild(listItem);
                                }

                            }
                        }

                    }

                }
            }
        };
    // data structure to track members already added
    addedMembers.Methods = [];
    addedMembers.Properties = [];
    addedMembers.Events = [];

    navHeader.appendChild(navHeaderLink);
    addText(navHeaderLink, 'API Index');
    // add parent class members if any
    if (isDefined(doc_data.parentClasses)) {
        makeList(doc_data.thisClass.properties, doc_data.parentClasses, 'Properties', 'propertiesList');
        makeList(doc_data.thisClass.methods, doc_data.parentClasses, 'Methods', 'methodsList');
        makeList(doc_data.thisClass.events, doc_data.parentClasses, 'Events', 'eventsList');
    } else {
        makeList(doc_data.thisClass.properties, [], 'Properties', 'propertiesList');
        makeList(doc_data.thisClass.methods, [], 'Methods', 'methodsList');
        makeList(doc_data.thisClass.events, [], 'Events', 'eventsList');
    }
    section.appendChild(navHeader);
    section.appendChild(memberIndex);
    doc_body.appendChild(section);

};
/**
 * add the member content
 */
function addMembersContent() {
    var members = [{name: 'Properties', data: 'properties'}, {name: 'Methods', data: 'methods'}, {name: 'Events', data: 'events'}],
        member,
        addedMembers = {},
        section,
        header,
        headerSuffix,
        item,
        itemWrapper,
        itemHeader,
        itemHeaderStr,
        itemParams = [],
        itemParamsHeader,
        itemDescription,
        itemDescriptionEl,
        itemFooter,
        itemFooterLink,
        itemFooterContent,
        paramTable,
        paramThead,
        paramTbody,
        paramTheadRow,
        paramTbodyRow,
        paramTH,
        paramTD,
        paramTableHeaders = ['name', 'Type', 'Required', 'Description'],
        text,
        i,
        iMax,
        j,
        jMax,
        k,
        kMax,
        m,
        mMax,
        topLinkP,
        topLinkA,
        // helper function
        createMemberItem = function (classData, member) {
            // create the class member items
            jMax = classData[member.data].length;
            for (j = 0; j < jMax; j++) {
                item = classData[member.data][j];
                if (!isItemInArray(addedMembers[member.name], item.name)) {
                    addedMembers[member.name].push(item.name);
                    itemWrapper = createEl('div', {id: member.name + item.name});
                    section.appendChild(itemWrapper);
                    itemHeader = createEl('h3', {id: item.name + 'Header'});
                    itemHeaderStr = item.name;
                    itemWrapper.appendChild(itemHeader);
                    itemDescription = createEl('div', {id: item.name + 'Description', class: 'description'});
                    itemWrapper.appendChild(itemDescription);
                    itemFooter = createEl('p', {class: 'vjs-only'});
                    itemFooterLink = createEl('a', {href: docsPath + item.meta.filename + '#L' + item.meta.lineno});
                    itemFooterContent = createEl('em', {id: item.name + 'Footer'});
                    itemFooter.appendChild(itemFooterContent);
                    topLinkP = createEl('p');
                    topLinkA = createEl('a', {href: '#top'});
                    addText(topLinkA, '[back to top]');
                    topLinkP.appendChild(topLinkA);
                    // for methods only handle params if any
                    if (member.name === 'Methods' && isDefined(item.params)) {
                        itemParams = [];
                        itemParamsHeader = createEl('h4');
                        addText(itemParamsHeader, 'Parameters');
                        paramTable = createEl('table');
                        paramThead = createEl('thead');
                        paramTbody = createEl('tbody');
                        paramTable.appendChild(paramThead);
                        paramTable.appendChild(paramTbody);
                        paramTheadRow = createEl('tr');
                        paramThead.appendChild(paramTheadRow);
                        // set the table headers
                        kMax = paramTableHeaders.length;
                        for (k = 0; k < kMax; k++) {
                            paramTH = createEl('th');
                            paramTheadRow.appendChild(paramTH);
                            addText(paramTH, paramTableHeaders[k]);
                        }
                        // now the table info
                        kMax = item.params.length;
                        for (k = 0; k < kMax; k++) {
                            paramTbodyRow = createEl('tr');
                            paramTbody.appendChild(paramTbodyRow);
                            paramTD = createEl('td');
                            addText(paramTD, item.params[k].name);
                            paramTbodyRow.appendChild(paramTD);
                            paramTD = createEl('td');
                            addText(paramTD, item.params[k].type.names.join('|'));
                            paramTbodyRow.appendChild(paramTD);
                            paramTD = createEl('td');
                            if (item.params[k].optional) {
                                text = doc.createTextNode('no');
                                itemParams.push('[' + item.params[k].name + ']');
                            } else {
                                text = doc.createTextNode('yes');
                                itemParams.push(item.params[k].name);
                            }
                            paramTD.appendChild(text);
                            if (isDefined(item.params[k].description)) {
                                paramTbodyRow.appendChild(paramTD);
                                paramTD = createEl('td');
                                addText(paramTD, item.params[k].description.slice(3, item.params[k].description.indexOf('</p>')));
                                paramTbodyRow.appendChild(paramTD);
                            }
                            paramTbody.appendChild(paramTbodyRow);
                        }
                        itemHeaderStr += '( ' + itemParams.join(', ') + ' )';
                        if (item.scope === 'static') {
                            itemHeaderStr = 'static ' + itemHeaderStr;
                        }
                        itemWrapper.appendChild(itemParamsHeader);
                        itemWrapper.appendChild(paramTable);
                    } else if (member.name === 'Methods') {
                        itemHeaderStr += '()';
                    }
                    itemWrapper.appendChild(itemFooter);
                    itemWrapper.appendChild(topLinkP);
                    addText(itemHeader, itemHeaderStr);
                    if (isDefined(item.deprecated)) {
                        headerSuffix = createEl('em', {class: 'deprecated'});
                        text = doc.createTextNode();
                        addText(headerSuffix, ' (deprecated)');
                        itemHeader.appendChild(headerSuffix);
                    }
                    itemDescriptionEl = doc.getElementById(item.name + 'Description');
                    itemDescriptionEl.innerHTML = item.description;
                    addText(itemFooterContent, 'Defined in ');
                    itemFooterContent.appendChild(itemFooterLink);
                    addText(itemFooterLink, 'src/js/' + item.meta.filename + ' line number: ' + item.meta.lineno);
                }
            }
        };
    // data structure to track members already added
    addedMembers.Methods = [];
    addedMembers.Properties = [];
    addedMembers.Events = [];
    iMax = members.length;
    for (i = 0; i < iMax; i++) {
        member = members[i];
        if (doc_data.thisClass[member.data].length > 0) {
            // create the member section
            section = createEl('section', {id: member.name.toLowerCase(), class: 'section'});
            main.appendChild(section);
            header = createEl('h2');
            addText(header, member.name);
            section.appendChild(header);
            // create the member items
            createMemberItem(doc_data.thisClass, member);
            if (isDefined(doc_data.parentClasses)) {
                mMax = doc_data.parentClasses.length;
                for (m = 0; m < mMax; m++) {
                    if (doc_data.parentClasses[m][member.data].length > 0) {
                        createMemberItem(doc_data.parentClasses[m], member);
                    }
                }
            }
        }
    }
};

/**
 * gets things going
 * @param {string} docFileName - name of the HTML doc we're building
 */
function contentInit(docFileName) {
    var fileName,
        parent_class_name,
        privateItems = [],
        srcFileName,
        idx,
        text,
        j,
        parentCounter = 0,
        // helper function to get the chain of parent classes
        getAncestorData = function (parent_class) {
            // get data objects for the class
            classes.parentClasses[parentCounter] = findClassObjects(docData, parent_class + '.js');
            // check to see if there are any parent class items
            if (classes.parentClasses[parentCounter].length > 0) {
                doc_data.parentClasses[parentCounter] = {};
                // get parent header info
                idx = findObjectInArray(classes.parentClasses[parentCounter], 'kind', 'class');
                doc_data.parentClasses[parentCounter].headerInfo = copyObj(classes.parentClasses[parentCounter][idx]);
                // get parent class path
                idx = findObjectInArray(classes.parentClasses[parentCounter], 'kind', 'file');
                if (idx > -1) {
                    parentClassFilePath = classes.parentClasses[parentCounter][idx].name;
                } else {
                    parentClassFilePath = doc_data.parentClasses[parentCounter].headerInfo.meta.filename;
                }
                // remove any private items
                privateItems = findObjectsInArray(classes.parentClasses[parentCounter], 'access', 'private');
                j = privateItems.length;
                while (j > 0) {
                    j--;
                    classes.parentClasses[parentCounter].splice(privateItems[j], 1);
                }
                // now get the member arrays
                doc_data.parentClasses[parentCounter].methods = getSubArray(classes.parentClasses[parentCounter], 'kind', 'function');
                doc_data.parentClasses[parentCounter].methods = sortArray(doc_data.parentClasses[parentCounter].methods, 'name');
                doc_data.parentClasses[parentCounter].events = getSubArray(classes.parentClasses[parentCounter], 'kind', 'event');
                doc_data.parentClasses[parentCounter].events = sortArray(doc_data.parentClasses[parentCounter].events, 'name');
                doc_data.parentClasses[parentCounter].properties = getSubArray(classes.parentClasses[parentCounter], 'kind', 'property');
                doc_data.parentClasses[parentCounter].properties = sortArray(doc_data.parentClasses[parentCounter].properties, 'name');
            }
            // get parent class, if any, and anything it inherits
            if (isDefined(doc_data.parentClasses[parentCounter].headerInfo.augments)) {
                idx = findObjectInArray(docData, 'name', doc_data.parentClasses[parentCounter].headerInfo.augments[0]);
                parent_class_name = docData[idx].meta.filename.replace('.js', '');
                parentCounter++;
                getAncestorData(parent_class_name);
            }
        };
    // get refenence to doc body and title
    doc_body = doc.getElementsByTagName('body')[0];
    title = doc.getElementsByTagName('title')[0];
    // content wrapper
    mainContent = createEl('div', {id: 'main', class: 'section'});
    // src file is the js file of the same name
    srcFileName = docFileName.replace('.html', '.js')
    // video.js is a special case - all others will be the same
    if (srcFileName === 'video.js') {
        // for doc purposes, treat video like a class, though it's not
        // get the data objects for this class
        classes.thisClass = findClassObjects(docData, srcFileName);
        idx = findObjectInArray(classes.thisClass, 'name', 'videojs');
        doc_data.thisClass = {};
        // get the class overview object
        doc_data.thisClass.headerInfo = copyObj(classes.thisClass[idx]);
        doc_data.thisClass.headerInfo.name = 'videojs';
        idx = findObjectInArray(classes.thisClass, 'kind', 'file');
        if (idx > -1) {
            classFilePath = classes.thisClass[idx].name;
        } else {
            classFilePath = doc_data.thisClass.headerInfo.meta.filename;
        }
        // set the doc title
        text = doc.createTextNode(doc_data.thisClass.headerInfo.name);
        title.appendChild(text);
        // remove any private items
        privateItems = findObjectsInArray(classes.thisClass, 'access', 'private');
        j = privateItems.length;
        while (j > 0) {
            j--;
            classes.thisClass.splice(privateItems[j], 1);
        }
        // now get the member arrays
        doc_data.thisClass.methods = getSubArray(classes.thisClass, 'kind', 'function');
        doc_data.thisClass.methods = sortArray(doc_data.thisClass.methods, 'name');
        doc_data.thisClass.events = getSubArray(classes.thisClass, 'kind', 'event');
        doc_data.thisClass.events = sortArray(doc_data.thisClass.events, 'name');
        doc_data.thisClass.properties = getSubArray(classes.thisClass, 'kind', 'property');
        doc_data.thisClass.properties = sortArray(doc_data.thisClass.properties, 'name');
    } else {
        // get the data objects for this class
        classes.thisClass = findClassObjects(docData, srcFileName);
        idx = findObjectInArray(classes.thisClass, 'kind', 'class');
        doc_data.thisClass = {};
        doc_data.thisClass.headerInfo = copyObj(classes.thisClass[idx]);
        // get the file path from @file object
        idx = findObjectInArray(classes.thisClass, 'kind', 'file');
        if (idx > -1) {
            classFilePath = classes.thisClass[idx].name;
        } else {
            classFilePath = doc_data.thisClass.headerInfo.meta.filename;
        }
        // set the doc title
        text = doc.createTextNode(doc_data.thisClass.headerInfo.name);
        title.appendChild(text);
        // remove any private items
        privateItems = findObjectsInArray(classes.thisClass, 'access', 'private');
        j = privateItems.length;
        while (j > 0) {
            j--;
            classes.thisClass.splice(privateItems[j], 1);
        }
        // now get the member arrays
        doc_data.thisClass.methods = getSubArray(classes.thisClass, 'kind', 'function');
        doc_data.thisClass.methods = sortArray(doc_data.thisClass.methods, 'name');
        doc_data.thisClass.events = getSubArray(classes.thisClass, 'kind', 'event');
        doc_data.thisClass.events = sortArray(doc_data.thisClass.events, 'name');
        doc_data.thisClass.properties = getSubArray(classes.thisClass, 'kind', 'property');
        doc_data.thisClass.properties = sortArray(doc_data.thisClass.properties, 'name');
        // get parent class, if any, and anything it inherits
        if (isDefined(doc_data.thisClass.headerInfo.augments)) {
            doc_data.parentClass = {};
            doc_data.parentClasses = [];
            classes.parentClasses = [];
            idx = findObjectInArray(docData, 'name', doc_data.thisClass.headerInfo.augments[0]);
            parent_class_name = docData[idx].meta.filename.replace('.js', '');
            getAncestorData(parent_class_name);
        }
    }
    // now we're ready to roll
    addIndex();
    addHeaderContent();
    addMembersContent();
};


`vjs-fluid` turns on the general fluid mode which will wait for the video to load to calculate the aspect ratio of the video.

Alternatively, because 16:9 and 4:3 aspect ratios are so common, we provided them as classes by default for you to use if you know that your videos are 16:9 or 4:3.

You can pass in the `fluid` option to the player or call `player.fluid(true)`. This will enable the generic fluid mode.

keep keep keep replace keep keep keep keep keep

Alternatively, because 16:9, 4:3, 9:16 and 1:1  aspect ratios are so common, we provided them as classes by default for you to use if you know that your videos are 16:9 or , 4:3, 9:16 or 1:1.

<!DOCTYPE html><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Component</title><link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700" rel="stylesheet" type="text/css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-forest.light.min.css"/><link rel="stylesheet" type="text/css" href="css/api-docs.css"/><link rel="canonical" href="https://docs.videojs.com/Component.html">

This documentation is for an outdated version of Video.js. See documentation for the current release.

API Index

Component Methods

Class Methods

$

$$

addChild

addClass

buildCSSClass

children

clearInterval

clearTimeout

contentEl

createEl

dimensions

dispose

el

enableTouchActivity

extend

getChild

getChildById

getComponent

hasClass

height

hide

id

initChildren

name

off

on

one

options

player

ready

registerComponent

removeChild

removeClass

setInterval

setTimeout

show

toggleClass

trigger

triggerReady

width

Inherited Methods from Button

handleKeyPress

Inherited Methods from ClickableComponent

controlText

handleBlur

handleClick

handleFocus

Inherited Methods from Component

Component

Base UI Component class
Components are embeddable UI objects that are represented by both a
javascript object and an element in the DOM. They can be children of other
components, and can have many children themselves.

    // adding a button to the player
    var button = player.addChild('button');
    button.el(); // -> button element

Button

Components are also event targets.

    button.on('click', function(){
      console.log('Button Clicked!');
    });
    button.trigger('customevent');

DEFINED IN: component.js line number: 18

EXTENDS: button.js

Constructor

Component( player,[options],[ready] )

Parameters

name	Type	Required	Description

player	Object	yes	Main Player

options	Object	no	Object of option names and values

ready	function	no	Ready callback function

Methods

$( selector, [context] )

Finds a single DOM element matching selector within the component's
contentEl or another custom context.

Parameters

name	Type	Required	Description

selector	String	yes	A valid CSS selector, which will be passed to querySelector.

context	Element|String	no	A DOM element within which to query. Can also be a selector
        string in which case the first matching element will be used
        as context. If missing (or no element matches selector), falls
        back to document.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 841

[back to top]

$$( selector, [context] )

Finds a all DOM elements matching selector within the component's
contentEl or another custom context.

Parameters

name	Type	Required	Description

selector	String	yes	A valid CSS selector, which will be passed to querySelectorAll.

context	Element|String	no	A DOM element within which to query. Can also be a selector
        string in which case the first matching element will be used
        as context. If missing (or no element matches selector), falls
        back to document.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 861

[back to top]

addChild( child, [options] )

Adds a child component inside this component

    myComponent.el();
    // ->

    myComponent.children();
    // [empty array]

    var myButton = myComponent.addChild('MyButton');
    // ->

myButton

    // -> myButton === myComponent.children()[0];

Pass in options for child constructors and options for children of the child

    var myButton = myComponent.addChild('MyButton', {
      text: 'Press Me',
      buttonChildExample: {
        buttonChildOption: true
      }
    });

Parameters

name	Type	Required	Description

child	String|Component	yes	The class name or instance of a child to add

options	Object	no	Options, including options to be passed to children of the child.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 315

[back to top]

addClass( classToAdd )

Add a CSS class name to the component's element

Parameters

name	Type	Required	Description

classToAdd	String	yes	Classname to add

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 892

[back to top]

buildCSSClass()

Allows sub components to stack CSS class names

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 593

[back to top]

children()

Get an array of all child components

    var kids = myComponent.children();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 282

[back to top]

clearInterval( intervalId )

Clears an interval and removes the associated dispose listener

Parameters

name	Type	Required	Description

intervalId	Number	yes	The id of the interval to clear

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1295

[back to top]

clearTimeout( timeoutId )

Clears a timeout and removes the associated dispose listener

Parameters

name	Type	Required	Description

timeoutId	Number	yes	The id of the timeout to clear

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1252

[back to top]

contentEl()

Return the component's DOM element where children are inserted.
Will either be the same as el() or a new element defined in createEl().

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 245

[back to top]

createEl( [tagName], [properties], [attributes] )

Create the component's DOM element

Parameters

name	Type	Required	Description

tagName	String	no	Element's node type. e.g. 'div'

properties	Object	no	An object of properties that should be set

attributes	Object	no	An object of attributes that should be set

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 208

[back to top]

dimensions( width, height )

Set both width and height at the same time

Parameters

name	Type	Required	Description

width	Number|String	yes	Width of player

height	Number|String	yes	Height of player

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1015

[back to top]

dispose()

Dispose of the component and all child components

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 101

[back to top]

el()

Get the component's DOM element

    var domEl = myComponent.el();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 195

[back to top]

enableTouchActivity()

Report user touch activity when touch events occur
User activity is used to determine when controls should show/hide. It's
relatively simple when it comes to mouse events, because any mouse event
should show the controls. So we capture mouse events that bubble up to the
player and report activity when that happens.
With touch events it isn't as easy. We can't rely on touch events at the
player level, because a tap (touchstart + touchend) on the video itself on
mobile devices is meant to turn controls off (and on). User activity is
checked asynchronously, so what could happen is a tap event on the video
turns the controls off, then the touchend event bubbles up to the player,
which if it reported user activity, would turn the controls right back on.
(We also don't want to completely block touch events from bubbling up)
Also a touchmove, touch+hold, and anything other than a tap is not supposed
to turn the controls back on on a mobile device.
Here we're setting the default component behavior to report user activity
whenever touch events happen, and this can be turned off by components that
want touch events to act differently.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1174

[back to top]

static extend( props ) (deprecated)

Sets up the constructor using the supplied init method
or uses the init of the parent object

Parameters

name	Type	Required	Description

props	Object	yes	An object of properties

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1350

[back to top]

getChild()

Returns a child component with the provided name

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 305

[back to top]

getChildById()

Returns a child component with the provided ID

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 295

[back to top]

static getComponent( name )

Gets a component by name

Parameters

name	Type	Required	Description

name	String	yes	Name of the component to get

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1331

[back to top]

hasClass( classToCheck )

Check if a component's element has a CSS class name

Parameters

name	Type	Required	Description

classToCheck	String	yes	Classname to check

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 881

[back to top]

height( num, [skipListeners] )

Get or set the height of the component (CSS values)
Setting the video tag dimension values only works with values in pixels.
Percent values will not work.
Some percents can be used, but width()/height() will return the number + %,
not the actual computed width/height.

Parameters

name	Type	Required	Description

num	Number|String	yes	New component height

skipListeners	Boolean	no	Skip the resize event trigger

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 998

[back to top]

hide()

Hide the component element if currently showing

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 944

[back to top]

id()

Get the component's ID

    var id = myComponent.id();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 256

[back to top]

initChildren()

Add and initialize default child components from options

    // when an instance of MyComponent is created, all children in options
    // will be added to the instance by their name strings and options
    MyComponent.prototype.options_ = {
      children: [
        'myChildComponent'
      ],
      myChildComponent: {
        myChildOption: true
      }
    };

    // Or when creating the component
    var myComp = new MyComponent(player, {
      children: [
        'myChildComponent'
      ],
      myChildComponent: {
        myChildOption: true
      }
    });

The children option can also be an array of
child options objects (that also include a 'name' key).
This can be used if you have two child components of the
same type that need different options.

    var myComp = new MyComponent(player, {
      children: [
        'button',
        {
          name: 'button',
          someOtherOption: true
        },
        {
          name: 'button',
          someOtherOption: false
        }
      ]
    });

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 455

[back to top]

name()

Get the component's name. The name is often used to reference the component.

    var name = myComponent.name();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 269

[back to top]

off( first, second, [third] )

Remove an event listener from this component's element

    myComponent.off('eventType', myFunc);

If myFunc is excluded, ALL listeners for the event type will be removed.
If eventType is excluded, ALL listeners will be removed from the component.
Alternatively you can use off to remove listeners that were added to other
elements or components using myComponent.on(otherComponent....
In this case both the event type and listener function are REQUIRED.

    myComponent.off(otherElement, 'eventType', myFunc);
    myComponent.off(otherComponent, 'eventType', myFunc);

Parameters

name	Type	Required	Description

first	String|Component	yes	The event type or other component

second	function|String	yes	The listener function or event type

third	function	no	The listener for other component

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 680

[back to top]

on( first, second, third )

Add an event listener to this component's element

    var myFunc = function(){
      var myComponent = this;
      // Do something when the event is fired
    };

    myComponent.on('eventType', myFunc);

The context of myFunc will be myComponent unless previously bound.
Alternatively, you can add a listener to another element or component.

    myComponent.on(otherElement, 'eventName', myFunc);
    myComponent.on(otherComponent, 'eventName', myFunc);

The benefit of using this over VjsEvents.on(otherElement, 'eventName', myFunc)
and otherComponent.on('eventName', myFunc) is that this way the listeners
will be automatically cleaned up when either component is disposed.
It will also bind myComponent as the context of myFunc.
NOTE: When using this on elements in the page other than window
and document (both permanent), if you remove the element from the DOM
you need to call myComponent.trigger(el, 'dispose') on it to clean up
references to it and allow the browser to garbage collect it.

Parameters

name	Type	Required	Description

first	String|Component	yes	The event type or other component

second	function|String	yes	The event handler or event type

third	function	yes	The event handler

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 605

[back to top]

one( first, second, [third] )

Add an event listener to be triggered only once and then removed

    myComponent.one('eventName', myFunc);

Alternatively you can add a listener to another element or component
that will be triggered only once.

    myComponent.one(otherElement, 'eventName', myFunc);
    myComponent.one(otherComponent, 'eventName', myFunc);

Parameters

name	Type	Required	Description

first	String|Component	yes	The event type or other component

second	function|String	yes	The listener function or event type

third	function	no	The listener function for other component

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 728

[back to top]

options( obj )

Deep merge of options objects
Whenever a property is an object on both options objects
the two properties will be merged using mergeOptions.

    Parent.prototype.options_ = {
      optionSet: {
        'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
        'childTwo': {},
        'childThree': {}
      }
    }
    newOptions = {
      optionSet: {
        'childOne': { 'foo': 'baz', 'abc': '123' }
        'childTwo': null,
        'childFour': {}
      }
    }

    this.options(newOptions);

RESULT

    {
      optionSet: {
        'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
        'childTwo': null, // Disabled. Won't be initialized.
        'childThree': {},
        'childFour': {}
      }
    }

Parameters

name	Type	Required	Description

obj	Object	yes	Object of new option values

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 145

[back to top]

player()

Return the component's player

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 135

[back to top]

ready( fn, sync )

Bind a listener to the component's ready state.
Different from event listeners in that if the ready event has already happened
it will trigger the function immediately.

Parameters

name	Type	Required	Description

fn	function	yes	Ready listener

sync	Boolean	yes	Exec the listener synchronously if component is ready

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 787

[back to top]

static registerComponent( name, comp )

Registers a component

Parameters

name	Type	Required	Description

name	String	yes	Name of the component to register

comp	Object	yes	The component to register

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1314

[back to top]

removeChild( component )

Remove a child component from this component's list of children, and the
child component's element from this component's element

Parameters

name	Type	Required	Description

component	Component	yes	Component to remove

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 415

[back to top]

removeClass( classToRemove )

Remove a CSS class name from the component's element

Parameters

name	Type	Required	Description

classToRemove	String	yes	Classname to remove

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 904

[back to top]

setInterval( fn, interval )

Creates an interval and sets up disposal automatically.

Parameters

name	Type	Required	Description

fn	function	yes	The function to run every N seconds.

interval	Number	yes	Number of ms to delay before executing specified function.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1271

[back to top]

setTimeout( fn, timeout )

Creates timeout and sets up disposal automatically.

Parameters

name	Type	Required	Description

fn	function	yes	The function to run after the timeout.

timeout	Number	yes	Number of ms to delay before executing specified function.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1227

[back to top]

show()

Show the component element if hidden

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 933

[back to top]

toggleClass( classToToggle, [predicate] )

Add or remove a CSS class name from the component's element

Parameters

name	Type	Required	Description

classToToggle	String

predicate	Boolean|function	no	Can be a function that returns a Boolean. If true, the class
        will be added; if false, the class will be removed. If not
        given, the class will be added if not present and vice versa.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 916

[back to top]

trigger( event, [hash] )

Trigger an event on an element

    myComponent.trigger('eventName');
    myComponent.trigger({'type':'eventName'});
    myComponent.trigger('eventName', {data: 'some data'});
    myComponent.trigger({'type':'eventName'}, {data: 'some data'});

Parameters

name	Type	Required	Description

event	Event|Object|String	yes	A string (the type) or an event object with a type attribute

hash	Object	no	data hash to pass along with the event

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 768

[back to top]

triggerReady()

Trigger the ready listeners

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 814

[back to top]

width( num, skipListeners )

Set or get the width of the component (CSS values)
Setting the video tag dimension values only works with values in pixels.
Percent values will not work.
Some percents can be used, but width()/height() will return the number + %,
not the actual computed width/height.

Parameters

name	Type	Required	Description

num	Number|String	yes	Optional width number

skipListeners	Boolean	yes	Skip the 'resize' event trigger

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 981

[back to top]

handleKeyPress()

Handle KeyPress (document level) - Extend with specific functionality for button

Defined in https://github.com/videojs/video.js/blob/master/src/js/button.js line number: 74

[back to top]

controlText( el )

create control text

Parameters

name	Type	Required	Description

el	Element	yes	Parent element for the control text

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 65

[back to top]

handleBlur()

Handle Blur - Remove keyboard triggers

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 163

[back to top]

handleClick()

Handle Click - Override with specific functionality for component

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 132

[back to top]

handleFocus()

Handle Focus - Add keyboard functionality to element

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 139

[back to top]


<!DOCTYPE html><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>VolumeLevel</title><link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700" rel="stylesheet" type="text/css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-forest.light.min.css"/><link rel="stylesheet" type="text/css" href="css/api-docs.css"/><link rel="canonical" href="https://docs.videojs.com/VolumeLevel.html">

This documentation is for an outdated version of Video.js. See documentation for the current release.

API Index

VolumeLevel Methods

Class Methods

createEl

Inherited Methods from Component

$

$$

addChild

addClass

buildCSSClass

children

clearInterval

clearTimeout

contentEl

dimensions

dispose

el

enableTouchActivity

extend

getChild

getChildById

getComponent

hasClass

height

hide

id

initChildren

name

off

on

one

options

player

ready

registerComponent

removeChild

removeClass

setInterval

setTimeout

show

toggleClass

trigger

triggerReady

width

VolumeLevel

Shows volume level

DEFINED IN: volume-level.js line number: 6

EXTENDS: component.js

Constructor

VolumeLevel( player,[options] )

Parameters

name	Type	Required	Description

player	Player|Object

options	Object

Methods

createEl()

Create the component's DOM element

Defined in https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control/volume-level.js line number: 16

[back to top]

$( selector, [context] )

Finds a single DOM element matching selector within the component's
contentEl or another custom context.

Parameters

name	Type	Required	Description

selector	String	yes	A valid CSS selector, which will be passed to querySelector.

context	Element|String	no	A DOM element within which to query. Can also be a selector
        string in which case the first matching element will be used
        as context. If missing (or no element matches selector), falls
        back to document.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 841

[back to top]

$$( selector, [context] )

Finds a all DOM elements matching selector within the component's
contentEl or another custom context.

Parameters

name	Type	Required	Description

selector	String	yes	A valid CSS selector, which will be passed to querySelectorAll.

context	Element|String	no	A DOM element within which to query. Can also be a selector
        string in which case the first matching element will be used
        as context. If missing (or no element matches selector), falls
        back to document.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 861

[back to top]

addChild( child, [options] )

Adds a child component inside this component

    myComponent.el();
    // ->

    myComponent.children();
    // [empty array]

    var myButton = myComponent.addChild('MyButton');
    // ->

myButton

    // -> myButton === myComponent.children()[0];

Pass in options for child constructors and options for children of the child

    var myButton = myComponent.addChild('MyButton', {
      text: 'Press Me',
      buttonChildExample: {
        buttonChildOption: true
      }
    });

Parameters

name	Type	Required	Description

child	String|Component	yes	The class name or instance of a child to add

options	Object	no	Options, including options to be passed to children of the child.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 315

[back to top]

addClass( classToAdd )

Add a CSS class name to the component's element

Parameters

name	Type	Required	Description

classToAdd	String	yes	Classname to add

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 892

[back to top]

buildCSSClass()

Allows sub components to stack CSS class names

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 593

[back to top]

children()

Get an array of all child components

    var kids = myComponent.children();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 282

[back to top]

clearInterval( intervalId )

Clears an interval and removes the associated dispose listener

Parameters

name	Type	Required	Description

intervalId	Number	yes	The id of the interval to clear

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1295

[back to top]

clearTimeout( timeoutId )

Clears a timeout and removes the associated dispose listener

Parameters

name	Type	Required	Description

timeoutId	Number	yes	The id of the timeout to clear

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1252

[back to top]

contentEl()

Return the component's DOM element where children are inserted.
Will either be the same as el() or a new element defined in createEl().

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 245

[back to top]

dimensions( width, height )

Set both width and height at the same time

Parameters

name	Type	Required	Description

width	Number|String	yes	Width of player

height	Number|String	yes	Height of player

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1015

[back to top]

dispose()

Dispose of the component and all child components

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 101

[back to top]

el()

Get the component's DOM element

    var domEl = myComponent.el();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 195

[back to top]

enableTouchActivity()

Report user touch activity when touch events occur
User activity is used to determine when controls should show/hide. It's
relatively simple when it comes to mouse events, because any mouse event
should show the controls. So we capture mouse events that bubble up to the
player and report activity when that happens.
With touch events it isn't as easy. We can't rely on touch events at the
player level, because a tap (touchstart + touchend) on the video itself on
mobile devices is meant to turn controls off (and on). User activity is
checked asynchronously, so what could happen is a tap event on the video
turns the controls off, then the touchend event bubbles up to the player,
which if it reported user activity, would turn the controls right back on.
(We also don't want to completely block touch events from bubbling up)
Also a touchmove, touch+hold, and anything other than a tap is not supposed
to turn the controls back on on a mobile device.
Here we're setting the default component behavior to report user activity
whenever touch events happen, and this can be turned off by components that
want touch events to act differently.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1174

[back to top]

static extend( props ) (deprecated)

Sets up the constructor using the supplied init method
or uses the init of the parent object

Parameters

name	Type	Required	Description

props	Object	yes	An object of properties

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1350

[back to top]

getChild()

Returns a child component with the provided name

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 305

[back to top]

getChildById()

Returns a child component with the provided ID

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 295

[back to top]

static getComponent( name )

Gets a component by name

Parameters

name	Type	Required	Description

name	String	yes	Name of the component to get

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1331

[back to top]

hasClass( classToCheck )

Check if a component's element has a CSS class name

Parameters

name	Type	Required	Description

classToCheck	String	yes	Classname to check

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 881

[back to top]

height( num, [skipListeners] )

Get or set the height of the component (CSS values)
Setting the video tag dimension values only works with values in pixels.
Percent values will not work.
Some percents can be used, but width()/height() will return the number + %,
not the actual computed width/height.

Parameters

name	Type	Required	Description

num	Number|String	yes	New component height

skipListeners	Boolean	no	Skip the resize event trigger

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 998

[back to top]

hide()

Hide the component element if currently showing

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 944

[back to top]

id()

Get the component's ID

    var id = myComponent.id();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 256

[back to top]

initChildren()

Add and initialize default child components from options

    // when an instance of MyComponent is created, all children in options
    // will be added to the instance by their name strings and options
    MyComponent.prototype.options_ = {
      children: [
        'myChildComponent'
      ],
      myChildComponent: {
        myChildOption: true
      }
    };

    // Or when creating the component
    var myComp = new MyComponent(player, {
      children: [
        'myChildComponent'
      ],
      myChildComponent: {
        myChildOption: true
      }
    });

The children option can also be an array of
child options objects (that also include a 'name' key).
This can be used if you have two child components of the
same type that need different options.

    var myComp = new MyComponent(player, {
      children: [
        'button',
        {
          name: 'button',
          someOtherOption: true
        },
        {
          name: 'button',
          someOtherOption: false
        }
      ]
    });

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 455

[back to top]

name()

Get the component's name. The name is often used to reference the component.

    var name = myComponent.name();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 269

[back to top]

off( first, second, [third] )

Remove an event listener from this component's element

    myComponent.off('eventType', myFunc);

If myFunc is excluded, ALL listeners for the event type will be removed.
If eventType is excluded, ALL listeners will be removed from the component.
Alternatively you can use off to remove listeners that were added to other
elements or components using myComponent.on(otherComponent....
In this case both the event type and listener function are REQUIRED.

    myComponent.off(otherElement, 'eventType', myFunc);
    myComponent.off(otherComponent, 'eventType', myFunc);

Parameters

name	Type	Required	Description

first	String|Component	yes	The event type or other component

second	function|String	yes	The listener function or event type

third	function	no	The listener for other component

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 680

[back to top]

on( first, second, third )

Add an event listener to this component's element

    var myFunc = function(){
      var myComponent = this;
      // Do something when the event is fired
    };

    myComponent.on('eventType', myFunc);

The context of myFunc will be myComponent unless previously bound.
Alternatively, you can add a listener to another element or component.

    myComponent.on(otherElement, 'eventName', myFunc);
    myComponent.on(otherComponent, 'eventName', myFunc);

The benefit of using this over VjsEvents.on(otherElement, 'eventName', myFunc)
and otherComponent.on('eventName', myFunc) is that this way the listeners
will be automatically cleaned up when either component is disposed.
It will also bind myComponent as the context of myFunc.
NOTE: When using this on elements in the page other than window
and document (both permanent), if you remove the element from the DOM
you need to call myComponent.trigger(el, 'dispose') on it to clean up
references to it and allow the browser to garbage collect it.

Parameters

name	Type	Required	Description

first	String|Component	yes	The event type or other component

second	function|String	yes	The event handler or event type

third	function	yes	The event handler

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 605

[back to top]

one( first, second, [third] )

Add an event listener to be triggered only once and then removed

    myComponent.one('eventName', myFunc);

Alternatively you can add a listener to another element or component
that will be triggered only once.

    myComponent.one(otherElement, 'eventName', myFunc);
    myComponent.one(otherComponent, 'eventName', myFunc);

Parameters

name	Type	Required	Description

first	String|Component	yes	The event type or other component

second	function|String	yes	The listener function or event type

third	function	no	The listener function for other component

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 728

[back to top]

options( obj )

Deep merge of options objects
Whenever a property is an object on both options objects
the two properties will be merged using mergeOptions.

    Parent.prototype.options_ = {
      optionSet: {
        'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
        'childTwo': {},
        'childThree': {}
      }
    }
    newOptions = {
      optionSet: {
        'childOne': { 'foo': 'baz', 'abc': '123' }
        'childTwo': null,
        'childFour': {}
      }
    }

    this.options(newOptions);

RESULT

    {
      optionSet: {
        'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
        'childTwo': null, // Disabled. Won't be initialized.
        'childThree': {},
        'childFour': {}
      }
    }

Parameters

name	Type	Required	Description

obj	Object	yes	Object of new option values

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 145

[back to top]

player()

Return the component's player

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 135

[back to top]

ready( fn, sync )

Bind a listener to the component's ready state.
Different from event listeners in that if the ready event has already happened
it will trigger the function immediately.

Parameters

name	Type	Required	Description

fn	function	yes	Ready listener

sync	Boolean	yes	Exec the listener synchronously if component is ready

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 787

[back to top]

static registerComponent( name, comp )

Registers a component

Parameters

name	Type	Required	Description

name	String	yes	Name of the component to register

comp	Object	yes	The component to register

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1314

[back to top]

removeChild( component )

Remove a child component from this component's list of children, and the
child component's element from this component's element

Parameters

name	Type	Required	Description

component	Component	yes	Component to remove

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 415

[back to top]

removeClass( classToRemove )

Remove a CSS class name from the component's element

Parameters

name	Type	Required	Description

classToRemove	String	yes	Classname to remove

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 904

[back to top]

setInterval( fn, interval )

Creates an interval and sets up disposal automatically.

Parameters

name	Type	Required	Description

fn	function	yes	The function to run every N seconds.

interval	Number	yes	Number of ms to delay before executing specified function.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1271

[back to top]

setTimeout( fn, timeout )

Creates timeout and sets up disposal automatically.

Parameters

name	Type	Required	Description

fn	function	yes	The function to run after the timeout.

timeout	Number	yes	Number of ms to delay before executing specified function.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1227

[back to top]

show()

Show the component element if hidden

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 933

[back to top]

toggleClass( classToToggle, [predicate] )

Add or remove a CSS class name from the component's element

Parameters

name	Type	Required	Description

classToToggle	String

predicate	Boolean|function	no	Can be a function that returns a Boolean. If true, the class
        will be added; if false, the class will be removed. If not
        given, the class will be added if not present and vice versa.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 916

[back to top]

trigger( event, [hash] )

Trigger an event on an element

    myComponent.trigger('eventName');
    myComponent.trigger({'type':'eventName'});
    myComponent.trigger('eventName', {data: 'some data'});
    myComponent.trigger({'type':'eventName'}, {data: 'some data'});

Parameters

name	Type	Required	Description

event	Event|Object|String	yes	A string (the type) or an event object with a type attribute

hash	Object	no	data hash to pass along with the event

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 768

[back to top]

triggerReady()

Trigger the ready listeners

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 814

[back to top]

width( num, skipListeners )

Set or get the width of the component (CSS values)
Setting the video tag dimension values only works with values in pixels.
Percent values will not work.
Some percents can be used, but width()/height() will return the number + %,
not the actual computed width/height.

Parameters

name	Type	Required	Description

num	Number|String	yes	Optional width number

skipListeners	Boolean	yes	Skip the 'resize' event trigger

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 981

[back to top]


Puts the player in [fluid](#fluid) mode and the value is used when calculating the dynamic size of the player. The value should represent a ratio - two numbers separated by a colon (e.g. `"16:9"` or `"4:3"`).

Prevents the player from running the autoSetup for media elements with `data-setup` attribute.

keep keep keep add keep keep keep keep keep

Alternatively, the classes `vjs-16-9`, `vjs-9-16`, `vjs-4-3` or `vjs-1-1` can be added to the player.

# Layout

Video.js generally lays out the player to the dimensions that are set as attributes or via CSS, like other DOM elements. However, we provide a few ways to make the player be more fluid.

## Fluid Mode

Video.js has a fluid mode that keeps the player sized to a particular aspect ratio.

By default, fluid mode will use the intrinsic size of the video once loaded but you can change it with classes or with the `aspectRatio` option.

Enabling fluid mode will disable fill mode. If both are enabled, fluid mode takes precedence.

You can enable fluid in a few ways:

* Add `vjs-fluid`, `vjs-16-9`, or `vjs-4-3` as a class to the player element.
* pass `fluid` option to the player.
* call `player.fluid(true)`.
* pass `aspectRatio` option to the player.
* call `player.aspectRatio('16:9')`.

### Classes

There are three classes associated with fluid mode, `vjs-fluid`, `vjs-16-9`, and `vjs-4-3`.

`vjs-fluid` turns on the general fluid mode which will wait for the video to load to calculate the aspect ratio of the video.

Alternatively, because 16:9 and 4:3 aspect ratios are so common, we provided them as classes by default for you to use if you know that your videos are 16:9 or 4:3.

### Enabling Fluid Mode

You can pass in the `fluid` option to the player or call `player.fluid(true)`. This will enable the generic fluid mode.

```js
var player = videojs('vid1', {
  fluid: true
});
```

```js
var player = videojs('vid2');

player.fluid(true);
```

### Setting Aspect Ratio

You can specify an aspect ratio for us to use if you don't want to use the intrinsic values from the video element or if you have a specific ratio in mind. It works as either a method call or an option to the player.

This option is in the form of two integers separated by a colon like so `16:9` or `4:3`.

```js
// make a vertical video
var player = videojs('vid1', {
  aspectRatio: '9:16'
});
```

```js
var player = videojs('vid2');

// make a square video
player.aspectRatio('1:1');
```

### Disabling Fluid Mode

You can disable fluid mode by remove the associated classes or by calling passing in `false` to the method.

```js
player.fluid(false);
```

## Fill Mode

Fill mode will make the player fit and fill out its container. This is often useful if you have a responsive website and already have a container for Video.js that resizes properly to your design. It can be set either via a class or an option.

If fill is enabled, it'll turn off fluid mode. If the player is configured with both fluid and fill options, fluid mode takes precedence.

### Class

There's just one class for this one: `vjs-fill`. When available, Video.js will enter fill mode.

### Enabling Fill Mode

You can pass in the `fill` option to the player or call `player.fill(true)`. This will enable fill mode.

```js
var player = videojs('vid1', {
  fill: true
});
```

```js
var player = videojs('vid2');

player.fill(true);
```

### Disabling Fill Mode

You can disable fill mode by removing the associated class or by passing `false` in to the method.

```js
player.fill(false);
```

## Responsive Mode

Responsive mode will make the player's UI customize itself based on the size of the player. This is useful if you have embeds of varying sizes - or if you want a fluid/fill player to adjust its UI based on its size.

Responsive mode is independent of fluid mode or fill mode - it only deals with the arrangements of the UI within the player, not with the size of the player. However, it is often useful to use responsive mode in conjunction with either fluid mode or fill mode!

### Class

A player in responsive mode will add and remove classes based on its size breakpoints. The default breakpoints, classes, and sizes are outlined below:

| Name     | Class                | Min. Width | Max. Width |
| -------- | -------------------- | ---------- | ---------- |
| `tiny`   | `vjs-layout-tiny`    | 0          | 210        |
| `xsmall` | `vjs-layout-x-small` | 211        | 320        |
| `small`  | `vjs-layout-small`   | 321        | 425        |
| `medium` | `vjs-layout-medium`  | 426        | 768        |
| `large`  | `vjs-layout-large`   | 769        | 1440       |
| `xlarge` | `vjs-layout-x-large` | 1441       | 2560       |
| `huge`   | `vjs-layout-huge`    | 2561       | Infinity   |

### Enabling Responsive Mode

You can enable responsive mode by passing the `responsive` option or by calling `player.responsive(true)`.

```js
var player = videojs('vid1', {
  responsive: true
});
```

```js
var player = videojs('vid2');

player.responsive(true);
```

### Disabling Responsive Mode

You can disable responsive mode by passing `false` to the method.

```js
player.responsive(false);
```

### Customizing Breakpoints

The default breakpoints can be customized by passing the `breakpoints` option or by calling `player.breakpoints({...})`.

```js
var player = videojs('vid1', {
  breakpoints: {
    medium: 500
  }
});
```

```js
var player = videojs('vid2');

player.breakpoints({
  medium: 500
});
```

The breakpoints object should have keys matching the **Name** from the table above and values matching the **Max. Width** from the table above. The **Min. Width** is calculated by adding one to the previous breakpoint's **Max. Width**.

Anytime breakpoints are customized, previous customizations are discarded.

### Restoring Default Breakpoints

The default breakpoints can be restored by calling `player.breakpoints(true)`.

```js
var player = videojs('vid1');

player.breakpoints(true);
```

This is only useful if breakpoints had previously been customized.


/**
 * @file text-track-button.js
 */
import TrackButton from '../track-button.js';
import Component from '../../component.js';
import TextTrackMenuItem from './text-track-menu-item.js';
import OffTextTrackMenuItem from './off-text-track-menu-item.js';

/**
 * The base class for buttons that toggle specific text track types (e.g. subtitles)
 *
 * @extends MenuButton
 */
class TextTrackButton extends TrackButton {

  /**
   * Creates an instance of this class.
   *
   * @param {Player} player
   *        The `Player` that this class should be attached to.
   *
   * @param {Object} [options={}]
   *        The key/value store of player options.
   */
  constructor(player, options = {}) {
    options.tracks = player.textTracks();

    super(player, options);
  }

  /**
   * Create a menu item for each text track
   *
   * @param {TextTrackMenuItem[]} [items=[]]
   *        Existing array of items to use during creation
   *
   * @return {TextTrackMenuItem[]}
   *         Array of menu items that were created
   */
  createItems(items = [], TrackMenuItem = TextTrackMenuItem) {

    // Label is an override for the [track] off label
    // USed to localise captions/subtitles
    let label;

    if (this.label_) {
      label = `${this.label_} off`;
    }
    // Add an OFF menu item to turn all tracks off
    items.push(new OffTextTrackMenuItem(this.player_, {
      kinds: this.kinds_,
      kind: this.kind_,
      label
    }));

    this.hideThreshold_ += 1;

    const tracks = this.player_.textTracks();

    if (!Array.isArray(this.kinds_)) {
      this.kinds_ = [this.kind_];
    }

    for (let i = 0; i < tracks.length; i++) {
      const track = tracks[i];

      // only add tracks that are of an appropriate kind and have a label
      if (this.kinds_.indexOf(track.kind) > -1) {

        const item = new TrackMenuItem(this.player_, {
          track,
          kinds: this.kinds_,
          kind: this.kind_,
          // MenuItem is selectable
          selectable: true,
          // MenuItem is NOT multiSelectable (i.e. only one can be marked "selected" at a time)
          multiSelectable: false
        });

        item.addClass(`vjs-${track.kind}-menu-item`);
        items.push(item);
      }
    }

    return items;
  }

}

Component.registerComponent('TextTrackButton', TextTrackButton);
export default TextTrackButton;


<!DOCTYPE html><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Button</title><link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700" rel="stylesheet" type="text/css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-forest.light.min.css"/><link rel="stylesheet" type="text/css" href="css/api-docs.css"/><link rel="canonical" href="https://docs.videojs.com/Button.html">

This documentation is for an outdated version of Video.js. See documentation for the current release.

API Index

Button Methods

Class Methods

addChild

createEl

handleKeyPress

Inherited Methods from ClickableComponent

buildCSSClass

controlText

handleBlur

handleClick

handleFocus

Inherited Methods from Component

$

$$

addClass

children

clearInterval

clearTimeout

contentEl

dimensions

dispose

el

enableTouchActivity

extend

getChild

getChildById

getComponent

hasClass

height

hide

id

initChildren

name

off

on

one

options

player

ready

registerComponent

removeChild

removeClass

setInterval

setTimeout

show

toggleClass

trigger

triggerReady

width

Button

Base class for all buttons

DEFINED IN: button.js line number: 12

EXTENDS: clickable-component.js

Constructor

Button( player,[options] )

Parameters

name	Type	Required	Description

player	Object	yes	Main Player

options	Object	no	Object of option names and values

Methods

addChild( child, [options] ) (deprecated)

Adds a child component inside this button

Parameters

name	Type	Required	Description

child	String|Component	yes	The class name or instance of a child to add

options	Object	no	Options, including options to be passed to children of the child.

Defined in https://github.com/videojs/video.js/blob/master/src/js/button.js line number: 57

[back to top]

createEl( [type], [props], [attributes] )

Create the component's DOM element

Parameters

name	Type	Required	Description

type	String	no	Element's node type. e.g. 'div'

props	Object	no	An object of properties that should be set on the element

attributes	Object	no	An object of attributes that should be set on the element

Defined in https://github.com/videojs/video.js/blob/master/src/js/button.js line number: 26

[back to top]

handleKeyPress()

Handle KeyPress (document level) - Extend with specific functionality for button

Defined in https://github.com/videojs/video.js/blob/master/src/js/button.js line number: 74

[back to top]

buildCSSClass()

Allows sub components to stack CSS class names

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 102

[back to top]

controlText( el )

create control text

Parameters

name	Type	Required	Description

el	Element	yes	Parent element for the control text

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 65

[back to top]

handleBlur()

Handle Blur - Remove keyboard triggers

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 163

[back to top]

handleClick()

Handle Click - Override with specific functionality for component

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 132

[back to top]

handleFocus()

Handle Focus - Add keyboard functionality to element

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 139

[back to top]

$( selector, [context] )

Finds a single DOM element matching selector within the component's
contentEl or another custom context.

Parameters

name	Type	Required	Description

selector	String	yes	A valid CSS selector, which will be passed to querySelector.

context	Element|String	no	A DOM element within which to query. Can also be a selector
        string in which case the first matching element will be used
        as context. If missing (or no element matches selector), falls
        back to document.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 841

[back to top]

$$( selector, [context] )

Finds a all DOM elements matching selector within the component's
contentEl or another custom context.

Parameters

name	Type	Required	Description

selector	String	yes	A valid CSS selector, which will be passed to querySelectorAll.

context	Element|String	no	A DOM element within which to query. Can also be a selector
        string in which case the first matching element will be used
        as context. If missing (or no element matches selector), falls
        back to document.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 861

[back to top]

addClass( classToAdd )

Add a CSS class name to the component's element

Parameters

name	Type	Required	Description

classToAdd	String	yes	Classname to add

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 892

[back to top]

children()

Get an array of all child components

    var kids = myComponent.children();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 282

[back to top]

clearInterval( intervalId )

Clears an interval and removes the associated dispose listener

Parameters

name	Type	Required	Description

intervalId	Number	yes	The id of the interval to clear

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1295

[back to top]

clearTimeout( timeoutId )

Clears a timeout and removes the associated dispose listener

Parameters

name	Type	Required	Description

timeoutId	Number	yes	The id of the timeout to clear

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1252

[back to top]

contentEl()

Return the component's DOM element where children are inserted.
Will either be the same as el() or a new element defined in createEl().

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 245

[back to top]

dimensions( width, height )

Set both width and height at the same time

Parameters

name	Type	Required	Description

width	Number|String	yes	Width of player

height	Number|String	yes	Height of player

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1015

[back to top]

dispose()

Dispose of the component and all child components

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 101

[back to top]

el()

Get the component's DOM element

    var domEl = myComponent.el();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 195

[back to top]

enableTouchActivity()

Report user touch activity when touch events occur
User activity is used to determine when controls should show/hide. It's
relatively simple when it comes to mouse events, because any mouse event
should show the controls. So we capture mouse events that bubble up to the
player and report activity when that happens.
With touch events it isn't as easy. We can't rely on touch events at the
player level, because a tap (touchstart + touchend) on the video itself on
mobile devices is meant to turn controls off (and on). User activity is
checked asynchronously, so what could happen is a tap event on the video
turns the controls off, then the touchend event bubbles up to the player,
which if it reported user activity, would turn the controls right back on.
(We also don't want to completely block touch events from bubbling up)
Also a touchmove, touch+hold, and anything other than a tap is not supposed
to turn the controls back on on a mobile device.
Here we're setting the default component behavior to report user activity
whenever touch events happen, and this can be turned off by components that
want touch events to act differently.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1174

[back to top]

static extend( props ) (deprecated)

Sets up the constructor using the supplied init method
or uses the init of the parent object

Parameters

name	Type	Required	Description

props	Object	yes	An object of properties

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1350

[back to top]

getChild()

Returns a child component with the provided name

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 305

[back to top]

getChildById()

Returns a child component with the provided ID

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 295

[back to top]

static getComponent( name )

Gets a component by name

Parameters

name	Type	Required	Description

name	String	yes	Name of the component to get

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1331

[back to top]

hasClass( classToCheck )

Check if a component's element has a CSS class name

Parameters

name	Type	Required	Description

classToCheck	String	yes	Classname to check

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 881

[back to top]

height( num, [skipListeners] )

Get or set the height of the component (CSS values)
Setting the video tag dimension values only works with values in pixels.
Percent values will not work.
Some percents can be used, but width()/height() will return the number + %,
not the actual computed width/height.

Parameters

name	Type	Required	Description

num	Number|String	yes	New component height

skipListeners	Boolean	no	Skip the resize event trigger

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 998

[back to top]

hide()

Hide the component element if currently showing

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 944

[back to top]

id()

Get the component's ID

    var id = myComponent.id();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 256

[back to top]

initChildren()

Add and initialize default child components from options

    // when an instance of MyComponent is created, all children in options
    // will be added to the instance by their name strings and options
    MyComponent.prototype.options_ = {
      children: [
        'myChildComponent'
      ],
      myChildComponent: {
        myChildOption: true
      }
    };

    // Or when creating the component
    var myComp = new MyComponent(player, {
      children: [
        'myChildComponent'
      ],
      myChildComponent: {
        myChildOption: true
      }
    });

The children option can also be an array of
child options objects (that also include a 'name' key).
This can be used if you have two child components of the
same type that need different options.

    var myComp = new MyComponent(player, {
      children: [
        'button',
        {
          name: 'button',
          someOtherOption: true
        },
        {
          name: 'button',
          someOtherOption: false
        }
      ]
    });

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 455

[back to top]

name()

Get the component's name. The name is often used to reference the component.

    var name = myComponent.name();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 269

[back to top]

off( first, second, [third] )

Remove an event listener from this component's element

    myComponent.off('eventType', myFunc);

If myFunc is excluded, ALL listeners for the event type will be removed.
If eventType is excluded, ALL listeners will be removed from the component.
Alternatively you can use off to remove listeners that were added to other
elements or components using myComponent.on(otherComponent....
In this case both the event type and listener function are REQUIRED.

    myComponent.off(otherElement, 'eventType', myFunc);
    myComponent.off(otherComponent, 'eventType', myFunc);

Parameters

name	Type	Required	Description

first	String|Component	yes	The event type or other component

second	function|String	yes	The listener function or event type

third	function	no	The listener for other component

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 680

[back to top]

on( first, second, third )

Add an event listener to this component's element

    var myFunc = function(){
      var myComponent = this;
      // Do something when the event is fired
    };

    myComponent.on('eventType', myFunc);

The context of myFunc will be myComponent unless previously bound.
Alternatively, you can add a listener to another element or component.

    myComponent.on(otherElement, 'eventName', myFunc);
    myComponent.on(otherComponent, 'eventName', myFunc);

The benefit of using this over VjsEvents.on(otherElement, 'eventName', myFunc)
and otherComponent.on('eventName', myFunc) is that this way the listeners
will be automatically cleaned up when either component is disposed.
It will also bind myComponent as the context of myFunc.
NOTE: When using this on elements in the page other than window
and document (both permanent), if you remove the element from the DOM
you need to call myComponent.trigger(el, 'dispose') on it to clean up
references to it and allow the browser to garbage collect it.

Parameters

name	Type	Required	Description

first	String|Component	yes	The event type or other component

second	function|String	yes	The event handler or event type

third	function	yes	The event handler

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 605

[back to top]

one( first, second, [third] )

Add an event listener to be triggered only once and then removed

    myComponent.one('eventName', myFunc);

Alternatively you can add a listener to another element or component
that will be triggered only once.

    myComponent.one(otherElement, 'eventName', myFunc);
    myComponent.one(otherComponent, 'eventName', myFunc);

Parameters

name	Type	Required	Description

first	String|Component	yes	The event type or other component

second	function|String	yes	The listener function or event type

third	function	no	The listener function for other component

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 728

[back to top]

options( obj )

Deep merge of options objects
Whenever a property is an object on both options objects
the two properties will be merged using mergeOptions.

    Parent.prototype.options_ = {
      optionSet: {
        'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
        'childTwo': {},
        'childThree': {}
      }
    }
    newOptions = {
      optionSet: {
        'childOne': { 'foo': 'baz', 'abc': '123' }
        'childTwo': null,
        'childFour': {}
      }
    }

    this.options(newOptions);

RESULT

    {
      optionSet: {
        'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
        'childTwo': null, // Disabled. Won't be initialized.
        'childThree': {},
        'childFour': {}
      }
    }

Parameters

name	Type	Required	Description

obj	Object	yes	Object of new option values

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 145

[back to top]

player()

Return the component's player

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 135

[back to top]

ready( fn, sync )

Bind a listener to the component's ready state.
Different from event listeners in that if the ready event has already happened
it will trigger the function immediately.

Parameters

name	Type	Required	Description

fn	function	yes	Ready listener

sync	Boolean	yes	Exec the listener synchronously if component is ready

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 787

[back to top]

static registerComponent( name, comp )

Registers a component

Parameters

name	Type	Required	Description

name	String	yes	Name of the component to register

comp	Object	yes	The component to register

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1314

[back to top]

removeChild( component )

Remove a child component from this component's list of children, and the
child component's element from this component's element

Parameters

name	Type	Required	Description

component	Component	yes	Component to remove

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 415

[back to top]

removeClass( classToRemove )

Remove a CSS class name from the component's element

Parameters

name	Type	Required	Description

classToRemove	String	yes	Classname to remove

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 904

[back to top]

setInterval( fn, interval )

Creates an interval and sets up disposal automatically.

Parameters

name	Type	Required	Description

fn	function	yes	The function to run every N seconds.

interval	Number	yes	Number of ms to delay before executing specified function.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1271

[back to top]

setTimeout( fn, timeout )

Creates timeout and sets up disposal automatically.

Parameters

name	Type	Required	Description

fn	function	yes	The function to run after the timeout.

timeout	Number	yes	Number of ms to delay before executing specified function.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1227

[back to top]

show()

Show the component element if hidden

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 933

[back to top]

toggleClass( classToToggle, [predicate] )

Add or remove a CSS class name from the component's element

Parameters

name	Type	Required	Description

classToToggle	String

predicate	Boolean|function	no	Can be a function that returns a Boolean. If true, the class
        will be added; if false, the class will be removed. If not
        given, the class will be added if not present and vice versa.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 916

[back to top]

trigger( event, [hash] )

Trigger an event on an element

    myComponent.trigger('eventName');
    myComponent.trigger({'type':'eventName'});
    myComponent.trigger('eventName', {data: 'some data'});
    myComponent.trigger({'type':'eventName'}, {data: 'some data'});

Parameters

name	Type	Required	Description

event	Event|Object|String	yes	A string (the type) or an event object with a type attribute

hash	Object	no	data hash to pass along with the event

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 768

[back to top]

triggerReady()

Trigger the ready listeners

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 814

[back to top]

width( num, skipListeners )

Set or get the width of the component (CSS values)
Setting the video tag dimension values only works with values in pixels.
Percent values will not work.
Some percents can be used, but width()/height() will return the number + %,
not the actual computed width/height.

Parameters

name	Type	Required	Description

num	Number|String	yes	Optional width number

skipListeners	Boolean	yes	Skip the 'resize' event trigger

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 981

[back to top]