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