openui/open-ui

Improve <video> and <audio> elements

オープン

#213 opened on 2020/10/27

 (19 件のコメント) (2 件のリアクション) (0 人の担当者)MDX (222 件のフォーク)github user discovery
help wantedmedianeeds-championresearch

Repository metrics

Stars
 (4,488 個のスター)
PR merge metrics
 (平均マージ 2d) (30d で 9 merged PRs)

説明

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>

コントリビューターガイド