The player
The network’s video player: one row of controls on a phone that never runs off the screen.
The specimen
The part is in review for the next Shared release; the specimen is here so the design can be seen.
The controls are one row: play, mute, the volume slider, the time, captions and fullscreen. Speed and picture-in-picture step out; under 380 px the mute button stands alone; under 360 px the time shows the position alone. The row never runs off the screen.
The same player draws every <video data-ov-player>: the network's controls, the picture's own colour while it loads, and the small player that keeps a video going while you browse (mini.js).
The phone row here is the change in review, applied to the pinned player so you can see it: speed and picture-in-picture step out and the slider is 64 px, which is what keeps fullscreen on the screen. The 4.200 player still shows both at 390 px and cuts it.
What shipped
4.192.0 shipped our own small player that keeps a video going while you browse. The phone row is in review for the next release: the phone rules lost to a later sizing block, so at 390 px fullscreen was cut; the fix puts the phone block last, steps speed and picture-in-picture out, shortens the volume slider and shows the position alone under 360 px.
“Player on a phone: one row that never runs off the screen.” — the change, measured at 390 px on openvibe.video
The rules it carries out
98 A player's controls are one row that never runs off the screen.110 Check a style in the order the page loads it.55 A video that keeps playing while you browse plays in our own small player.46 Everything you can press is at least 44 px.
Build it
<!-- openvibe-shared/player.css + player.js -->
<video data-ov-player controls playsinline preload="metadata"
src="/video.m3u8" poster="/poster.jpg"></video>
<!-- on a phone: play, mute, volume, time, captions, fullscreen; speed and PiP step out -->