- From: Jose Ramirez <jose@multimedia4everyone.com>
- Date: Sat, 27 Sep 2008 09:20:24 -0700
- To: "Patrick" <optomatic@rogers.com>
- Cc: www-smil@w3.org
Hello Patrick,
On Linux, RealPlayer is the way to go:
https://helixcommunity.org/
It has Support for Vorbis audio and Theora video.
One thing that it doesn't have is a good text format, which when Timed
Text becomes Recommended, I hope RealPlayer adds it.
Here's a couple of examples of SMIL, you'll notice on TreePoem without a
transparent background the text disappears.
http://www.multimedia4everyone.com/treepoem/treepoem.zip
On March of the Free Formats the text and underlying background matches.
Until Timed Text comes to the rescue keep text layout simple.
http://www.multimedia4everyone.com/march/march_3.zip
Another use of SMIL is SMIL Timesheets.
It's new, not fully standarized yet but the potential of XHTML, SVG and
SMIL in a browser is jaw dropping.
This is the code for a simple slideshow with audio. It's an early
example but it works on Linux Opera 9.52
Good Luck with your SMIL projects,
Jose Ramirez
PS For me the text editor that comes with Ubuntu works fine. That's the
coolest part of SMIL, it gives access to multimedia to everyone :)
-------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:smil="http://www.w3.org/2007/07/SMIL30/Timesheets">
<head>
<title>Testing SMIL Timesheets, SVG, Audio in XHTML</title>
</body>
</html>
-----------------------------------------------------------------------
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.0"
width="600"
height="600"
id="svg_0">
<defs id="defs0" />
<g id="layer0">
<image
xlink:href="pretty_china_01.jpg"
x="0"
y="0"
width="600"
height="600"
id="image1"
style="opacity:0;" >
<animate id="a_i1" targetElement="image1" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="2s" dur="3s" fill="freeze"/>
<animate id="a_i1a" targetElement="image1" attributeName="opacity"
attributeType="CSS"
from="1" to="0" begin="7s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_02.jpg"
x="0"
y="0"
width="600"
height="600"
id="image2"
style="opacity:0;" >
<animate id="a_i2" targetElement="image2" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="10s" dur="3s" fill="freeze"/>
<animate id="a_i2a" targetElement="image2" attributeName="opacity"
attributeType="CSS"
from="1" to="0" begin="15s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_03.jpg"
x="0"
y="75"
width="600"
height="450"
id="image3"
style="opacity:0;" >
<animate id="a_i3" targetElement="image3" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="18s" dur="3s" fill="freeze"/>
<animate id="a_i3a" targetElement="image3" attributeName="opacity"
attributeType="CSS"
from="1" to="0" begin="23s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_04.jpg"
x="0"
y="75"
width="600"
height="450"
id="image4"
style="opacity:0;" >
<animate id="a_i4" targetElement="image4" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="26s" dur="3s" fill="freeze"/>
<animate id="a_i4a" targetElement="image4" attributeName="opacity"
attributeType="CSS"
from="1" to="0" begin="31s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_05.jpg"
x="0"
y="0"
width="600"
height="600"
id="image5"
style="opacity:0;" >
<animate id="a_i5" targetElement="image5" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="34s" dur="3s" fill="freeze"/>
<animate id="a_i5a" targetElement="image5" attributeName="opacity"
attributeType="CSS"
from="1" to="0" begin="39s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_06.jpg"
x="0"
y="0"
width="600"
height="600"
id="image6"
style="opacity:0;" >
<animate id="a_i6" targetElement="image6" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="42s" dur="3s" fill="freeze"/>
<animate id="a_i6a" targetElement="image6" attributeName="opacity"
attributeType="CSS"
from="1" to="0" begin="47s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_07.jpg"
x="0"
y="0"
width="600"
height="600"
id="image7"
style="opacity:0;" >
<animate id="a_i7" targetElement="image7" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="50s" dur="3s" fill="freeze"/>
<animate id="a_i7a" targetElement="image7" attributeName="opacity"
attributeType="CSS"
from="1" to="0" begin="55s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_08.jpg"
x="0"
y="75"
width="600"
height="450"
id="image8"
style="opacity:0;" >
<animate id="a_i8" targetElement="image8" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="58s" dur="3s" fill="freeze"/>
<animate id="a_i8a" targetElement="image8" attributeName="opacity"
attributeType="CSS"
from="1" to="0" begin="63s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_09.jpg"
x="0"
y="75"
width="600"
height="450"
id="image9"
style="opacity:0;" >
<animate id="a_i9" targetElement="image9" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="66s" dur="3s" fill="freeze"/>
<animate id="a_i9a" targetElement="image9" attributeName="opacity"
attributeType="CSS"
from="1" to="0" begin="71s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_10.jpg"
x="0"
y="0"
width="600"
height="600"
id="image10"
style="opacity:0;" >
<animate id="a_i10" targetElement="image10" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="74s" dur="3s" fill="freeze"/>
<animate id="a_i10a" targetElement="image10"
attributeName="opacity" attributeType="CSS"
from="1" to="0" begin="79s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_11.jpg"
x="0"
y="0"
width="600"
height="600"
id="image11"
style="opacity:0;" >
<animate id="a_i11" targetElement="image11" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="82s" dur="3s" fill="freeze"/>
<animate id="a_i11a" targetElement="image11"
attributeName="opacity" attributeType="CSS"
from="1" to="0" begin="87s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_12.jpg"
x="0"
y="75"
width="600"
height="450"
id="image12"
style="opacity:0;" >
<animate id="a_i12" targetElement="image12" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="90s" dur="3s" fill="freeze"/>
<animate id="a_i12a" targetElement="image12"
attributeName="opacity" attributeType="CSS"
from="1" to="0" begin="95s" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_13.jpg"
x="75"
y="0"
width="450"
height="600"
id="image13"
style="opacity:0;" >
<animate id="a_i13" targetElement="image13" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="98s" dur="3s" fill="freeze"/>
<animate id="a_i13a" targetElement="image13"
attributeName="opacity" attributeType="CSS"
from="1" to="0" begin="01:43" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_14.jpg"
x="0"
y="0"
width="600"
height="600"
id="image14"
style="opacity:0;" >
<animate id="a_i14" targetElement="image14" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="01:46" dur="3s" fill="freeze"/>
<animate id="a_i14a" targetElement="image14"
attributeName="opacity" attributeType="CSS"
from="1" to="0" begin="01:51" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_15.jpg"
x="0"
y="75"
width="600"
height="450"
id="image15"
style="opacity:0;" >
<animate id="a_i15" targetElement="image15" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="01:54" dur="3s" fill="freeze"/>
<animate id="a_i15a" targetElement="image15"
attributeName="opacity" attributeType="CSS"
from="1" to="0" begin="01:59" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_16.jpg"
x="75"
y="0"
width="450"
height="600"
id="image16"
style="opacity:0;" >
<animate id="a_i16" targetElement="image16" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="02:02" dur="3s" fill="freeze"/>
<animate id="a_i16a" targetElement="image16"
attributeName="opacity" attributeType="CSS"
from="1" to="0" begin="02:07" dur="3s" fill="freeze"/>
</image>
<image
xlink:href="pretty_china_17.jpg"
x="0"
y="75"
width="600"
height="450"
id="image17"
style="opacity:0;" >
<animate id="a_i17" targetElement="image17" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="02:10" dur="3s" fill="freeze"/>
<animate id="a_i17a" targetElement="image17"
attributeName="opacity" attributeType="CSS"
from="1" to="0" begin="02:25" dur="3s" fill="freeze"/>
</image>
<g id="g_c1"
style="opacity:0;" >
<text
x="0"
y="0"
id="c_txt_1"
xml:space="preserve"
style="opacity:1;font-size:20px;font-style:normal;font-variant:normal;
font-weight:normal;font-stretch:normal;
fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;
stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;
font-family:Arial;-inkscape-font-specification:Arial">
<a
xlink:href="http://www.multimedia4everyone.com/china/media_source/Feng_Jiang.htm"
xlink:show="new" >
<tspan
x="0"
y="150"
id="c_txtspan_1">Images by Feng Jiang, copy of his 2006 website
</tspan>
</a>
</text>
<text
x="0"
y="0"
id="c_txt_2"
xml:space="preserve"
style="opacity:1;font-size:20px;font-style:normal;font-variant:normal;
font-weight:normal;font-stretch:normal;
fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;
stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;
font-family:Arial;-inkscape-font-specification:Arial">
<a
xlink:href="http://www.multimedia4everyone.com/china/media_source/mausoleum.html"
xlink:show="new" >
<tspan
x="0"
y="250"
id="c_txtspan_2">Music Return to Mausland by Mauseoleum, opsound
2005
</tspan>
</a>
</text>
<text
x="0"
y="0"
id="c_txt_3"
xml:space="preserve"
style="opacity:1;font-size:20px;font-style:normal;font-variant:normal;
font-weight:normal;font-stretch:normal;
fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;
stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;
font-family:Arial;-inkscape-font-specification:Arial">
<a xlink:href="http://www.tml.tkk.fi/~pv/timesheets/index.xhtml"
xlink:show="new" >
<tspan
x="0"
y="350"
id="c_txtspan_3">Timesheets JavaScript Engine by Petri Vuorimaa
</tspan>
</a>
</text>
<text
x="0"
y="0"
id="c_txt_4"
xml:space="preserve"
style="opacity:1;font-size:20px;font-style:normal;font-variant:normal;
font-weight:normal;font-stretch:normal;
fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;
stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;
font-family:Arial;-inkscape-font-specification:Arial">
<tspan
x="0"
y="450"
id="c_txtspan_4">Assembled by Jose Ramirez 2008
</tspan>
</text>
<animate id="a_c_1" targetElement="g_c1" attributeName="opacity"
attributeType="CSS"
from="0" to="1" begin="02:28" dur="10s" fill="freeze"/>
</g>
</g>
</svg>
------------------------------------------------------------------------
-------- Original Message --------
Subject: help getting started
From: Patrick <optomatic@rogers.com>
Date: Thu, September 11, 2008 6:20 am
To: www-smil@w3.org
This is my first post
SMIL looks like a great idea but unfortunately like most great ideas it
does not seem to have been rapid,ly adopted.
The website has lots of links but if someone could guide me, it could
really cut down on th time needed to get setup.
Please tell me the best player for Linux?
I guess everything can be done in a text editor but please tell me your
favorite authoring tool again on the Linux platform.
Thanks in advance-Patrick
Received on Saturday, 27 September 2008 16:21:07 UTC