Skip to content

Check out this storyboard video player, specifically for a Stenotype project proposal. Stenotype, an advanced note-taking platform, finds its roots in the open-source Django project, Firepad.

License

Notifications You must be signed in to change notification settings

jagatpandya/stenotype-storyboard-html-video-player

Repository files navigation

Stenotype Storyboard Video Player

Designed a video player as part of a Design Engineering proposal to introduce Stenotype - a user-friendly note-taking platform inspired by the open-source Django project, Firepad. The aim is to make Stenotype even better, offering new features and an appealing UI. Stenotype, a device-based note-taking platform, is envisioned to be built on the Firepad, with the vision to replace traditional school notebooks with a modern, cutting-edge solution.

Click the badge below to explore Firepad in action. Near to that, there is a badge linking to the open-source GitHub repository of Firepad - check it out!

Firepad Github

Screenshot

To watch it on a mobile device, change the screen orientation to landscape!

Screenshot

BadgeBadgeBadge

Note: To view the code in the GitHub repository with proper formatting, make sure to change the tab size from the default 8 to 4. You can adjust this setting in GitHub > Settings > Appearance > Tab Size Preference.

The following HTML hierarchy illustrates the structure of a video player. It is enclosed within a main element with the class wrapper, containing a div element with the class player and a series of nested elements. These include controls, buttons, and a video element, each with specific classes and attributes designed for styling and functionality.

main.wrapper
└── div.player
    └── div.player-hover[data-fullscreen="false"]
        ├── a.github-corner
        │   └── svg
        ├── div.container
        │   ├── div.watermark-container
        │   │   └── img[src="src/images/watermark.png"]
        │   └── div.player-container
        │       ├── div.video-progress
        │       │   └── div.video-progress-bar
        │       ├── div.player-controls
        │       │   ├── div.player-buttons
        │       │   │   ├── button.button.play
        │       │   │   ├── button.button.pause[hidden]
        │       │   │   ├── button.button.backward
        │       │   │   ├── button.button.forward
        │       │   │   ├── button.button.mute
        │       │   │   ├── button.button.unmute[hidden]
        │       │   │   ├── div.volume-progress
        │       │   │   │   └── div.volume-progress-bar
        │       │   │   └── div.time-container
        │       │   │       ├── p.current-time
        │       │   │       ├── p.time-separator
        │       │   │       └── p.duration
        │       │   └── div.full-screen-container
        │       │       ├── button.button.full-screen
        │       │       └── button.button.exit-full-screen[hidden]
        │       └── video.video[poster="src/images/thumbnail.png"]
        │           └── source[src="src/videos/stenotype-storyboard.mp4" type="video/mp4"]
        └── script[src="src/scripts/script.js"]

Explore the layout design of this video player, crafted with a combination of grid and flex boxes. The structure is illustrated in the screenshot below:

Screenshot

To explore individual elements of the layout, navigate to the corresponding directory by clicking here.

License

Please refer to the LICENSE file for information on the license terms and any associated rights and limitations (MIT).

About

Check out this storyboard video player, specifically for a Stenotype project proposal. Stenotype, an advanced note-taking platform, finds its roots in the open-source Django project, Firepad.

Topics

Resources

License

Stars

Watchers

Forks