Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/limjiechao/video-player-with-timed-banner
https://github.com/limjiechao/video-player-with-timed-banner
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/limjiechao/video-player-with-timed-banner
- Owner: limjiechao
- Created: 2022-06-23T10:39:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-06-28T11:22:54.000Z (over 2 years ago)
- Last Synced: 2023-03-06T14:20:42.322Z (almost 2 years ago)
- Language: TypeScript
- Homepage: video-player-with-timed-banner.vercel.app
- Size: 82.6 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Solution
## Browser Compatibility
This video player should work in:
- desktop, i.e. macOS, Safari
- desktop Google Chrome
- desktop Mozilla Firefox
- iOS Safari and all WebKit-based browsers on iOS
I did not get to test it in browsers on Android as I do not have an Android device.
## Player Features
| **Feature/Browsers** | **Desktop Chrome, Firefox & Safari** | **iOS Safari & iOS WebKit-based browsers** |
|----------------------------------------------------|--------------------------------------|--------------------------------------------|
| **Video (inline)** | Y | Y |
| **Video (full screen)** | Y | Y [^1] |
| **Custom player (inline)** | Y | Y |
| **Custom player (full screen)** | Y | N [^2] |
| **Custom player fading transitions (inline)** | Y | Y |
| **Custom player fading transitions (full screen)** | Y | N [^2] |
| **Banner (inline)** | Y | Y |
| **Banner (full screen)** | Y | N [^2], [^6] |
| **Volume level adjustment** | Y | N [^3], [^6] |
| **Volume slider fading transition (inline)** | N [^4] | N [^3] |
| **Volume mute/unmute (inline)** | Y | N [^3], [^6] |
| **Volume mute/unmute (full screen)** | Y | Y [^5], [^6] |
| **Timeline slider** | Y | Y [^5] |
| **Custom player play button** | Y | Y [^5] |
| **Overlay play button (inline)** | Y | Y [^5] |
| **Overlay play button (full screen)** | Y | N |
[^1]: This is possible because iOS WebKit does support full screen on HTML `` element via vendor-prefixed methods.
[^2]: This is because iOS WebKit does not support full screen for HTML `
` element.
[^3]: Volume control is hidden because iOS WebKit does not support volume adjustment.
[^4]: No fading transition in Safari because range input continues to take up width even when CSS `-webkit-appeartance: none; appearance: none` is set.
[^5]: This is available via the browser default HTML video player interface.
[^6]: This is on par with YouTube on the mobile web.