Porting from HTML Portal to SVG Portal

This section is intended to briefly introduce some guides when porting HTML portals to SVG. Some samples are provided to guide you through the transfer to SVG smoothly. For the SVG basic concept, please refer to the SVG tutorials on Internet.

Video Tag in SVG Portal

The following sample shows how to map the videoplane tag in HTML to video tag in SVG. Here the video tag just supports media display function. (Note: There is no videoplane tag in SVG, as a replacement the video tag is introduced)

Static creation of videoplane tag in HTML (Better not use this static creation)

<html>
  <body>
    <videoplane height="720" width="1280" style="position:absolute"></videoplane>
  </body>
</html>

Dynamic creation of videoplane tag in HTML

<html>
    <head>
    <script type="text/javascript">
    function addVideoPlane(elementId) {
        var element = document.getElementById(elementId);
        var video = document.createElement("videoplane");
        element.zIndex = "0";
        video.index = "0";
        video.subtitles = "false";
        video.style.position = "absolute";
        video.style.visibility = "visible";
        video.style.left = "0";
        video.style.top = "0";
        video.style.width = "1280";
        video.style.height = "720";
        element.appendChild(video);
    }
    function onLoad() {
        addVideoPlane("videowindow");
    }
    </script>
    </head>

    <body onLoad="onLoad();">
    <div id="videowindow"></div>
    </body>
</html>

Static creation of video tag in SVG

<video
    id="video"
    visibility="visible"
    focusable="true"
    overlay="top"
    x="10" y="30"
    width="340" height="240"
    begin="indefinite"
</video>

Dynamic load and use of video tag in SVG

<script type="text/ecmascript">
    <![CDATA[function onLoad() {
        var video = document.getElementById('video'); 
        video.setAttributeNS("http://www.w3.org/1999/xlink","href","");
        video.setAttributeNS(null,"transform","translate(50,135)");
        video.setAttributeNS(null,"x","10"); //can dynamic change 
        video.setAttributeNS(null,"y","30");
        video.setAttributeNS(null,"width","340");
        video.setAttributeNS(null,"height","240");
    }]]>
</script>