Attachment 371590 Details for Bug 198660 – Workaround

Workaround

bug.html (text/html), 1.00 KB, created by Matthew on 2019-06-07 09:50:45 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Matthew

Created: 2019-06-07 09:50:45 PDT

Size: 1.00 KB

patch

obsolete

><!doctype html>
><html>
>  <head>
>    <meta charset="UTF-8">
>  </head>
>
>  <body>
>    <h1>Workaround: Video in SVG's &lt;foreignBody&gt;</h1>
>    <svg width="600" height="600" viewBox="0 0 600 600">
>      <g transform="translate(100 0)">
>	<rect x="-50" y="-50" width="500" height="500" style="fill:blue"/>
>	<rect x="0" y="0" width="400" height="400" style="fill:red"/>
>      </g>
>      <foreignObject x="100" y="0" width="400" height="100%">
>	<div xmlns="http://www.w3.org/1999/xhtml">
>	  <p>The video should appear in the red rectangle</p>
>	  <video width="100%" height="100%" controls="on">
>	    <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"/>
>	    <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"/> 
>	    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"/>
>	    <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp"/>
>	  </video>
>	</div>
>      </foreignObject>
>    </svg>
>  </body>
></html>

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <h1>Workaround: Video in SVG's &lt;foreignBody&gt;</h1>
    <svg width="600" height="600" viewBox="0 0 600 600">
      <g transform="translate(100 0)">
	<rect x="-50" y="-50" width="500" height="500" style="fill:blue"/>
	<rect x="0" y="0" width="400" height="400" style="fill:red"/>
      </g>
      <foreignObject x="100" y="0" width="400" height="100%">
	<div xmlns="http://www.w3.org/1999/xhtml">
	  <p>The video should appear in the red rectangle</p>
	  <video width="100%" height="100%" controls="on">
	    <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"/>
	    <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"/> 
	    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"/>
	    <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp"/>
	  </video>
	</div>
      </foreignObject>
    </svg>
  </body>
</html>

Actions: View

Attachments on bug 198660: 371587 | 371590