limjiechao / video-player-with-timed-banner

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, 3
Volume level adjustment	Y	N 4, 3
Volume slider fading transition (inline)	N 5	N 4
Volume mute/unmute (inline)	Y	N 4, 3
Volume mute/unmute (full screen)	Y	Y 6, 3
Timeline slider	Y	Y 6
Custom player play button	Y	Y 6
Overlay play button (inline)	Y	Y 6
Overlay play button (full screen)	Y	N

Footnotes

1. This is possible because iOS WebKit does support full screen on HTML <video> element via vendor-prefixed methods. ↩

2. This is because iOS WebKit does not support full screen for HTML <div> element. ↩ ↩² ↩³

3. This is on par with YouTube on the mobile web. ↩ ↩² ↩³ ↩⁴

4. Volume control is hidden because iOS WebKit does not support volume adjustment. ↩ ↩² ↩³

5. No fading transition in Safari because range input continues to take up width even when CSS -webkit-appeartance: none; appearance: none is set. ↩

6. This is available via the browser default HTML video player interface. ↩ ↩² ↩³ ↩⁴