Video.js: How to create a custom component

[talamaska]

The documentation on the website is outdated.
There is no documentation about the full process of creating a custom component, add custom functionality like theater mode and use it in the component definition of the video player.
Searching the docs here:
http://docs.videojs.com/docs/guides/components.html
https://github.com/videojs/video.js/wiki/5.0-Change-Details

When I try to reference videojs.Component I receive an error of undefined
example code that I'm using now.

var player = videojs('video-main', {
                controlBar: {
                    children: {
                        progressControl: true,
                        playToggle: true,
                        currentTimeDisplay: true,
                        timeDivider: true,
                        durationDisplay: true,
                        //where I want to add custom component - logo brand 
                        //logoBrand : true,
                        //where i want to add theater(not full screen, but larger) mode
                         //theaterModeButton : true,
                        volumeMenuButton: {
                            vertical: true,
                            inline: false,
                            volumeBar: {
                                vertical: true
                            },
                            volumeLevel: false
                        },
                        fullscreenToggle: true
                    }
                }
            });

I looked at the logo branding plugin, but the concept for me is wrong, I would like it to be a component that is defined, and can be inserted in the controlBar like the other components.
No ES 6.
Please help, I'm struggling without proper documentation it was quite a pain to figure out the letter cases of the default components and the position the volume bar vertically. This was alsow missing from the docs, I have found a comment in the component itself.
https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-menu-button.js#L38

Could you guys please take time and fill out the docs, the v5 is live from some time and the docs are not updated. The plugins guide is also ridiculous and is from January
https://github.com/videojs/video.js/blob/master/docs/guides/plugins.md

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[talamaska]

cool, this is what, 3 years later?
Shame on video.js maintainers.

[gkatsev]

Thanks for your concern. We try our best to answer all the issues but sometimes issues are forgotten because we have a limited amount of people working on answering these issues (it's mostly just me).

In the time since, we have greatly improved our documentation, though, it's still not perfect. We also created a public slack team to ask questions in a more real-time fashion because some things don't lend themselves as well to the asynchronous github issue communication style.

To answer some of the questions that were asked.

We have docs on how to create components now (http://docs.videojs.com/tutorial-components.html#creating-a-component), which didn't exist before.

The letter casing is camelCase but we also updated it so that UpperCamalCase works too for this reason. Most of the default components are listed here (http://docs.videojs.com/tutorial-components.html#default-component-tree).

As for the logobrand, the idea with plugins is that you can just call the plugin and it'll provide the functionality you want rather than providing a component that you then need to position appropriately. Though, I guess it could make sense for some of these plugins to just be Components that are published for re-use.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nikushx]

https://nikushx.com/blog/2019/05/21/creating-custom-components-with-video-js/

Made a post about doing this. Took me a while so I wrote a post about it. Hope this helps someone!