Page MenuHomePhabricator
Paste P2461

Proposed HTML structure of video embeds
ActivePublic

Authored by TheDJ on Jan 5 2016, 11:36 PM.
<video id="mwe_player_4"
poster="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Folgers.ogv/352px--Folgers.ogv.jpg"
controls
preload="none"
class="video-js"
width="352"
height="264"
data-playerlayout="badge|mini|full"
data-durationhint="60"
data-startoffset="seconds"
data-endoffset="seconds"
data-mwtitle="Folgers.ogv"
data-mwprovider="wikimediacommons">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/9/94/Folgers.ogv/Folgers.ogv.360p.webm"
type="video/webm; codecs=&quot;vp8, vorbis&quot;"
transcodekey="360p.webm"
data-title="Web streamable WebM (360P)"
data-shorttitle="WebM 360P"
data-width="352"
data-height="264"
data-bandwidth="574352"
data-framerate="29.97002997003" />
<source src="https://upload.wikimedia.org/wikipedia/commons/9/94/Folgers.ogv"
type="video/ogg; codecs=&quot;theora, vorbis&quot;"
data-title="Original Ogg file, 352 × 264 (637 kbps)"
data-shorttitle="Ogg source"
data-width="352"
data-height="264"
data-bandwidth="636645"
data-framerate="29.97002997003" />
[..]
<track kind="subtitles" data-mwtitle="TimedText:Folgers.ogv.de.srt" data-mwprovider="wikimediacommons" type="text/x-srt" src="https://commons.wikimedia.org/w/index.php?title=TimedText:Folgers.ogv.de.srt&amp;action=raw&amp;ctype=text%2Fx-srt" srclang="de" data-dir="ltr" label="Deutsch (de) subtitles" />
<track kind="subtitles" data-mwtitle="TimedText:Folgers.ogv.en.srt" data-mwprovider="wikimediacommons" type="text/x-srt" src="https://commons.wikimedia.org/w/index.php?title=TimedText:Folgers.ogv.en.srt&amp;action=raw&amp;ctype=text%2Fx-srt" srclang="en" data-dir="ltr" label="English (en) subtitles" />
<track kind="subtitles" data-mwtitle="TimedText:Folgers.ogv.fr.srt" data-mwprovider="wikimediacommons" type="text/x-srt" src="https://commons.wikimedia.org/w/index.php?title=TimedText:Folgers.ogv.fr.srt&amp;action=raw&amp;ctype=text%2Fx-srt" srclang="fr" data-dir="ltr" label="français (fr) subtitles" />
<track kind="subtitles" data-mwtitle="TimedText:Folgers.ogv.sv.srt" data-mwprovider="wikimediacommons" type="text/x-srt" src="https://commons.wikimedia.org/w/index.php?title=TimedText:Folgers.ogv.sv.srt&amp;action=raw&amp;ctype=text%2Fx-srt" srclang="sv" data-dir="ltr" label="svenska (sv) subtitles" />
Sorry, your browser either has JavaScript disabled or does not have any supported player.<br /> You can <a href="https://upload.wikimedia.org/wikipedia/commons/9/94/Folgers.ogv">download the clip</a> or <a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Extension:TimedMediaHandler/Client_download">download a player</a> to play the clip in your browser.
</video>

Event Timeline

TheDJ changed the title of this paste from untitled to Proposed HTML structure of video embeds.Jan 5 2016, 11:36 PM
TheDJ updated the paste's language from autodetect to html.
TheDJ edited the content of this paste. (Show Details)
TheDJ added a project: TimedMediaHandler.

thumbtime needs to be matched.

data-width -> data-file-width
data-mwtitle -> resource="File:.."

Fix px in width/height

alt does not exist for video (specified but not added to output, spec defines it should not be there accessibility for video is captions )
link does not exist for video( specified but not added to ouput)

thumb=File.jpg: Actually swaps the player out for an image. We should make that set the poster attribute to enable T121617: Use an image file as a poster for an audio thumb player (But does this require core to know what an image is ?)

@TheDJ what would the output look like for an audio-only player? Would it use the <audio> tag, or would it reuse the <video> wrapper?

@cscott i initially figured <audio>, but I've since learned that <audio> can be problematic icw captioning for instance. So I'm actually starting to lean towards <video> now.

Also note that if you load a video player, it does heavy modification of the DOM. Not sure how VE would deal with that.