0

I have two images(png) and two video (mp4). Need to make slideshow in next sequence:

  • play video #1;
  • show image and show some text with fade effect on bottom of image;
  • show another image with some movement and zoom to center effect;
  • play video #2;

Need to use SVG only. I mean just run example.svg and it should play slideshow above.

<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <foreignObject id='v1' width="640" height="420">
        <iframe xmlns="http://www.w3.org/1999/xhtml" width="640" height="420" src="video1.ogg" frameborder="0"/>
    </foreignObject>
    <image width="640" height="1136" xlink:href="1.jpg">
        <animate id='a1' attributeType="CSS" attributeName="opacity" begin='v1.end' from="1" to="0" dur="5s" repeatCount="1" />
   </image>
</svg>

Thanks in advance

4

0 回答 0