feat: added info button to show video details overlay

[Shresthap21]

Description

This pull request adds a new InfoButton component to the Video.js control bar. The button, when clicked, displays an overlay with key video information such as duration, current playback time, resolution, and source URL. The overlay appears above the control bar and automatically disappears after 5 seconds.

This feature enhances the user experience by providing quick and accessible video metadata without requiring access to developer tools or console logs.

Specific Changes proposed

• Created InfoButton class extending Video.js Button component
• Added an ℹ️ icon for the info button via CSS
• Implemented an overlay that displays formatted video info on button click
• Added CSS styles for the overlay to appear above the control bar with semi-transparent background
• Registered the InfoButton component and added it to the control bar on player ready
• Added JSDoc comments for clarity and maintainability
• Ensured code passes Video.js linting and formatting standards

Requirements Checklist

• Feature implemented
• Change has been verified in an actual browser (Chrome)
• Unit Tests updated or fixed (not applicable)
• Docs/guides updated (not applicable)
• Example created (starter template on JSBin) (not applicable)
• Has no DOM changes which impact accessibility or trigger warnings
• Has no changes to JSDoc which cause npm run docs:api to error
• Reviewed by Two Core Contributors

[welcome]

💖 Thanks for opening this pull request! 💖

Things that will help get your PR across the finish line:

• Run npm run lint -- --errors locally to catch formatting errors earlier.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.