User:Brooke Vibber/Media rendering encapsulation 2

Current video layout: inline

<!-- Container div with weird styles -->
<div
	class="mediaContainer"
	style="position:relative;display:block;width:800px">

	<!-- Video or audio tag with weird styles and lots of metadata -->
	<video
		id="mwe_player_0"
		style="width:800px;height:450px"
		poster="/images/thumb/xyz.jpg"
		controls=""
		preload="none"
		class="kskin"
		data-durationhint="146.126"
		data-startoffset="0"
		data-mwtitle="Caminandes_-_Gran_Dillama_-_Blender_Foundation's_new_Open_Movie.webm"
		data-mwprovider="local">

		<!-- One or more sources, with lots of metadata -->
		<source
			src="/images/transcoded/xyz.480p.vp9.webm"
			type="video/webm; codecs=&quot;vp9, opus&quot;"
			transcodekey="480p.vp9.webm"
			data-title="Web streamable WebM VP9 (480P)"
			data-shorttitle="VP9 480P"
			data-width="854"
			data-height="480"
			data-bandwidth="606144"
			data-framerate="24" />

		<!-- Fallback content for ANCIENT non-video browsers. -->
		Sorry, your browser either has JavaScript disabled or does not have any supported player.<br />
		You can <a href="/images/xyz.webm">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>

</div>

Current video layout: popup

<!-- Container div with weird styles, AND a giant HTML payload attribute -->
<div
	id="mwe_player_4"
	class="PopUpMediaTransform"
	style="width:288px;"
	videopayload="&lt;div class=&quot;mediaContainer&quot; ..... &lt;/div&gt;">

	<!-- Thumbnail image -->
	<img
		alt="File:Caminandes - Gran Dillama - Blender Foundation&#39;s new Open Movie.webm"
		style="width:288px;height:162px"
		src="/images/thumb/xyz.webm.jpg">
	</img>

	<!-- Overlaid play button icon -->
	<a href="/images/7/7c/Caminandes_-_Gran_Dillama_-_Blender_Foundation%27s_new_Open_Movie.webm" title="Play media" target="new">
		<span class="play-btn-large">
			<span class="mw-tmh-playtext">Play media</span>
		</span>
	</a>

</div>

Possibilities

• Popup handling
  • maybe use an inline video?
  • or keep using an image but link it directly to the File: page
    • then use the file page + '?embedplayer=yes' to iframe it for the popup
    • ...instead of all that nasty HTML payload in an attribute

Possible layout: popup

<!-- Note: no id, no scary payload -->
<!-- Link -->
<a
	href="/wiki/File:Caminandes - Gran Dillama - Blender Foundation&#39;s new Open Movie.webm"
	class="image mw-media-thumb">

	<!-- Thumbnail image -->
	<!-- Note use of regular width/height stuff -->
	<img
		alt="File:Caminandes - Gran Dillama - Blender Foundation&#39;s new Open Movie.webm"
		width="288"
		height="162"
		src="/images/thumb/xyz.webm.jpg"/>

	<!-- Overlaid play button icon -->
	<span class="play-btn-large">
		<span class="mw-tmh-playtext">Play media</span>
	</span>

</a>

In this scenario, popup contents would be filled with an iframe created by taking the link and appending '?embedplayer=yes' ....?

Possible layout: embed

<!-- Just use an iframeeeeee! -->
<iframe
	src="/wiki/File:Caminandes - Gran Dillama - Blender Foundation&#39;s new Open Movie.webm?embedplayer=yes"
	class="mw-media-embed"
	width="288"
	height="162"
	allowfullscreen
	mozallowfullscreen
	webkitallowfullscreen
	msallowfullscreen>

	<!-- Fallback content .... maybe? Would this get used ever? -->
	<a
		href="/wiki/File:Caminandes - Gran Dillama - Blender Foundation&#39;s new Open Movie.webm"
		class="image mw-media-thumb">

		<!-- Thumbnail image -->
		<!-- Note use of regular width/height stuff -->
		<img
			alt="File:Caminandes - Gran Dillama - Blender Foundation&#39;s new Open Movie.webm"
			width="288"
			height="162"
			src="/images/thumb/xyz.webm.jpg"/>

		<!-- Overlaid play button icon -->
		<span class="play-btn-large">
			<span class="mw-tmh-playtext">Play media</span>
		</span>

	</a>

</iframe>

In this scenario, popup contents would be filled with an iframe created by taking the link and appending '?embedplayer=yes' ....?