openui/open-ui

Improve <video> and <audio> elements

Aperta

#213 aperta il 27 ott 2020

 (19 commenti) (2 reazioni) (0 assegnatari)MDX (222 fork)github user discovery
help wantedmedianeeds-championresearch

Metriche repository

Star
 (4488 stelle)
Metriche merge PR
 (Merge medio 2g) (9 PR mergiate in 30 g)

Descrizione

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>

Guida contributor