Playing videos in SVG

As per latest SVG recommendation by W3C which is v1.2
http://www.w3.org/TR/SVG/

SVG doesn’t have native support for adding videos.
Video should have been loaded either a texture of a shape or there should have been a video element like we have in SVG.

In the recommendation v2 for SVG it is proposed that it should be supported, in the following requirement specifications
http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Input#the_.3Cvideo.3E_element
http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Input#Arbitrary_fill

But we can add HTML content within SVG markup using <foreignObject>.

The foreignobject can either contain an iframe, for example to embed a youtube video we can have:
<svg>
<foreignObject>
<iframe width=’500′ height=’300′ src=’youtube video URL‘ frameborder=”0″>
</foreignObject>
</svg>

or we can have video tag within foreignobject:

<svg>
<foreignObject>
<video src=”video URL” style=”width:300px;      width:500px”>
</foreignObject>
</svg>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s