openui/open-ui

Improve <video> and <audio> elements

Open

#213 opened on Oct 27, 2020

 (19 comments) (2 reactions) (0 assignees)MDX (222 forks)github user discovery
help wantedmedianeeds-championresearch

Repository metrics

Stars
 (4,488 stars)
PR merge metrics
 (Avg merge 2d) (9 merged PRs in 30d)

Description

From what I saw, most developers prefer third-party players (video.js, Plyr, etc.) over native <video> and <audio> elements for two reasons:

  • style player
  • add controls

Off the top of my head:

  1. The speed of the audio/video playback can be set only via playbackRate property: document.getElementById('player').playbackRate = 0.5. Why not to expose it as UI control?

  2. Whether the audio/video should start playing over again when it's finished can be set only via loop property: document.getElementById('player').loop = true or via loop attribute: <video src="test.webm" loop>. Why not to expose it as UI control?

  3. There's no UI for switching sources (e.g. audio sources in different languages, video sources in different resolutions).

  4. The <source> element has no srclang and label attrubutes unlike <track> element. You can't do something like:

<video width="320" height="240" controls>
  <source src="forrest_gump_480.mp4" type="video/mp4" label="480p">
  <source src="forrest_gump_1080.mp4" type="video/mp4" label="1080p" default>
  <source src="forrest_gump_en.ogg" type="audio/ogg" srclang="en" label="English" default>
  <source src="forrest_gump_no.ogg" type="audio/ogg" srclang="no" label="Norwegian">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

Contributor guide