~ubuntu-branches/ubuntu/oneiric/w3-recs/oneiric : revision 5

1

<?xml version="1.0" encoding="UTF-8"?>

2

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

3

4

<head>

5

6

<title>Multimedia – SVG Tiny 1.2</title>

7

8

9

10

11

12

</head>

13

<body>

14

15

16

SVG Tiny 1.2 – 20081222

17

<ul>

18

19

<li><a href="expanded-toc.html">Contents</a></li>

20

<li><a href="painting.html">Previous</a></li>

21

22

<li><a href="elementTable.html">Elements</a></li>

23

<li><a href="attributeTable.html">Attributes</a></li>

24

</ul>

25

</div>

26

<h1 id="multimedia">12 Multimedia</h1>

27

28

<h2 id="toc">Contents</h2>

29

30

<li>12.1 <a href="multimedia.html#Smil2Media">Media elements</a>

31

32

<li>12.1.1 <a href="multimedia.html#MediaTimeline">Media timeline and document timeline</a></li>

33

<li>12.1.2 <a href="multimedia.html#MediaAvailability">Media availability</a></li>

34

<li>12.1.3 <a href="multimedia.html#PlatformLimits">Platform limits</a></li>

35

<li>12.1.4 <a href="multimedia.html#AudioMixing">Audio mixing for 'audio' and 'video' elements</a></li>

36

<li>12.1.5 <a href="multimedia.html#AudioVideoControl">Discrete control of audio and video</a></li>

37

<li>12.1.6 <a href="multimedia.html#Script_Control">Controlling media playback through script</a></li>

38

</ul></li>

39

<li>12.2 <a href="multimedia.html#AudioElement">The 'audio' element</a></li>

40

<li>12.3 <a href="multimedia.html#VideoElement">The 'video' element</a>

41

42

<li>12.3.1 <a href="multimedia.html#transformBehavior">Restricting the transformation of the 'video' element</a></li>

43

<li>12.3.2 <a href="multimedia.html#compositingBehavior">Restricting compositing of the 'video' element</a></li>

44

<li>12.3.3 <a href="multimedia.html#restrictedVideoExample">Examples</a></li>

45

</ul></li>

46

<li>12.4 <a href="multimedia.html#AnimationElement">The 'animation' element</a></li>

47

<li>12.5 <a href="multimedia.html#AudioLevelProperty">The 'audio-level' property</a></li>

48

<li>12.6 <a href="multimedia.html#Smil2Sync">Attributes for runtime synchronization</a></li>

49

<li>12.7 <a href="multimedia.html#initialVisibilityMediaAttribute">The 'initialVisibility' attribute</a></li>

50

</ul>

51

52

<h2 id="Smil2Media">12.1 Media elements</h2>

53

54

55

SVG supports <a href="intro.html#TermMediaElement">media elements</a> similar to the

56

<a href="http://www.w3.org/TR/2005/REC-SMIL2-20051213/extended-media-object.html">SMIL 2.1 Media Elements</a>

57

([<a href="refs.html#ref-SMIL21">SMIL21</a>], chapter 7).

58

Media elements define their own timelines within their time container. All SVG media elements support the

59

<a href="animate.html#TimingAttributes">SVG timing attributes</a> and <a href="multimedia.html#Smil2Sync">runtime synchronization attributes</a>.

60

The default <a href="animate.html#event-baseElement">event-base element</a> for all SVG media elements is the element itself.

61

62

63

64

The following elements are media elements:

65

66

67

<ul>

68

<li>

69

<a href="multimedia.html#AudioElement">'audio'</a>

70

</li>

71

<li>

72

<a href="multimedia.html#VideoElement">'video'</a>

73

</li>

74

<li>

75

<a href="multimedia.html#AnimationElement">'animation'</a>

76

</li>

77

</ul>

78

79

<h3 id="MediaTimeline">12.1.1 Media timeline and document timeline</h3>

80

<a href="intro.html#TermMediaElement">Media elements</a> start playing when they become active, i.e. at a time specified in the document timeline which depends on their 'begin' attribute (see <a href="animate.html#TimingAttributes">SVG timing attributes</a>). However, depending on the value of the <a href="struct.html#SVGElementTimelineBegin">'timelineBegin'</a> attribute on the <a href="intro.html#TermRootmostSVGElement">rootmost 'svg' element</a>, the actual beginning of the document timeline may be delayed until the whole document is loaded. This is the case when <a href="struct.html#SVGElementTimelineBegin">'timelineBegin'</a> is set to 'onLoad'. In that case, the beginning of the actual playback of the media will be delayed, but the media begin time in the document timeline will remain as specified.

81

82

Note: <a href="struct.html#ImageElement">'image'</a> elements are not considered as media elements because they are not timed. They start playing at time 0 in the document timeline.

83

The following examples illustrate this behavior:

84

85

<div class="example"><div class="exampleheader">Example: video-timelineBegin-01.svg</div><div class="examplesource"><pre><?xml version="1.0"?>

86

87

timelineBegin="onLoad">

88

89

90

</svg>

91

</pre></div></div>

92

93

In this example, the document timeline will start after the document is fully processed, i.e. at time <var>t0</var>+<var>t1</var>+<var>t2</var> ≥ 6s. The video will start when the document is loaded. But, at that time, the document time will be 0. So, the video will start with the first frame of the video.

94

95

<div class="example"><div class="exampleheader">Example: video-timelineBegin-02.svg</div><div class="examplesource"><pre><?xml version="1.0"?>

96

97

timelineBegin="onStart">

98

99

100

</svg></pre></div></div>

101

102

In this example, the document timeline will start when the <a href="struct.html#SVGElement">'svg'</a> element is fully parsed and processed, i.e. at time <var>t0</var>. The video will also start at document time 0, but since the video will only be processed when document time is <var>t0</var>+<var>t1</var>+<var>t2</var>, the video will start displaying the frame at time <var>t0</var>+<var>t1</var>+<var>t2</var> in the video timeline.

103

104

Furthermore, the time in the media timeline which is played, e.g. the exact frame of video or the exact sample of audio that is played, can be altered by the <a href="multimedia.html#SyncBehaviorAttribute">'syncBehavior'</a> attribute. The following examples illustrate this behavior. These examples are the same as the previous ones, but the values of the <a href="multimedia.html#SyncBehaviorAttribute">'syncBehavior'</a> attributes are changed from the default value  to 'independent'.

105

106

<div class="example"><div class="exampleheader">Example: video-timelineBegin-03.svg</div><div class="examplesource"><pre><?xml version="1.0"?>

107

108

timelineBegin="onLoad">

109

110

111

</svg>

112

</pre></div></div>

113

114

<div class="example"><div class="exampleheader">Example: video-timelineBegin-04.svg</div><div class="examplesource"><pre><?xml version="1.0"?>

115

116

timelineBegin="onStart">

117

118

119

</svg></pre></div></div>

120

121

In example video-timelineBegin-03.svg, the video does not start until the document's load event, whereas in example video-timelineBegin-04.svg, the video begins as soon as the video element is parsed and the video is ready for rendering. In both cases, since the timeline of the document and of the video are independent, when the video will start, it will start from the first frame, i.e. time 0 in the media timeline.

122

123

<h3 id="MediaAvailability">12.1.2 Media availability</h3>

124

The value of the <a href="struct.html#ExternalResourcesRequiredAttribute">'externalResourcesRequired'</a> attribute may also delay the actual time at which a media (even images) will start playing, but it does not affect the time in the document timeline. Indeed, media elements and the image element may require external resources referenced by the 'xlink:href' attribute. If the <a href="struct.html#ExternalResourcesRequiredAttribute">'externalResourcesRequired'</a> attribute is set to 'true', on the resource or on a parent in the scene tree, e.g. a <a href="struct.html#GElement">'g'</a> element, then this external resource has to become available before the media can start. If the <a href="struct.html#ExternalResourcesRequiredAttribute">'externalResourcesRequired'</a> attribute is set to 'false', the media element or the image element will start playing as soon as it becomes active.

125

126

The meaning of "available" depends on the media type, on the protocol used to access the resource as well as on the implementation. For example, if a protocol like HTTP is used, "available" may mean that the whole resource is downloaded. It may also mean that a coarse version of the resource is available, for example in case of progressive PNG (see <a href="http://www.w3.org/TR/PNG/#4Concepts.EncodingPassAbs">PNG Pass extraction</a> ([<a href="refs.html#ref-PNG">PNG</a>], section 4.5.2)). In that case, it is an implementation choice to decide whether to display the coarse version before the whole resource is downloaded. Another example is when streaming protocols like RTSP/RTP are used. In that case, "available" usually means that enough stream has been buffered before the playback may start. To reduce the amount of time required for a media to become available, authors are encouraged to use the <a href="struct.html#PrefetchElement">'prefetch'</a> element to signal that external resources have to be prefetched.

127

128

<h3 id="PlatformLimits">12.1.3 Platform limits</h3>

129

Particular platforms may have restrictions on the number of audio voices or channels that can be mixed, or the number of video streams that may be presented concurrently. Since these vary, the SVG language itself does not impose any such limits on audio or video.

130

131

<h3 id="AudioMixing">12.1.4 Audio mixing for 'audio' and 'video' elements</h3>

132

If two or more audio streams from <a href="multimedia.html#AudioElement">'audio'</a> or <a href="multimedia.html#VideoElement">'video'</a> elements are active at the same time, their rendering should be mixed in proportions equal to the computed value of the <a href="multimedia.html#AudioLevelProperty">'audio-level'</a> property of each audio stream. An audio stream may be active if it is referred to by an active audio element or if it is part of video content that is referred to by an active <a href="multimedia.html#VideoElement">'video'</a> element.

133

134

<h3 id="AudioVideoControl">12.1.5 Discrete control of audio and video</h3>

135

Authors may wish to independently control both the visual and auditory aspects of the <a href="multimedia.html#VideoElement">'video'</a> element. Through a combination of the various properties available, all permutations are possible, as described below:

136

<ul>

137

<li>play both video and audio: this is the default setting, and nothing special needs to be done</li>

138

<li>play video with no audio: use the <a href="multimedia.html#AudioLevelProperty">'audio-level'</a> property with a value of 0</li>

139

<li>play audio with no video: use the <a href="painting.html#VisibilityProperty">'visibility'</a> property with a value of <a href="painting.html#VisibilityHidden">hidden</a></li>

140

<li>hide both video and audio: use the <a href="painting.html#DisplayProperty">'display'</a> property with a value of none</li>

141

</ul>

142

143

<h3 id="Script_Control">12.1.6 Controlling media playback through script</h3>

144

In addition to setting fixed timeline attribute values or using declarative animation to control the playback of <a href="intro.html#TermMediaElement">media elements</a> such as <a href="multimedia.html#AudioElement">'audio'</a>,

145

<a href="multimedia.html#VideoElement">'video'</a>, and

146

<a href="multimedia.html#AnimationElement">'animation'</a>, SVG allows scripted control. See the uDOM section on <a href="svgudom.html#Multimedia_Control">Multimedia control</a> for details.

147

148

149

<h2 id="AudioElement">12.2 The 'audio' element</h2>

150

151

152

The <a href="multimedia.html#AudioElement">'audio'</a> element specifies an audio file which is to be rendered to provide synchronized audio. The usual SMIL timing features are used to start and stop the audio at the appropriate times. An <a href="multimedia.html#AudioElementHrefAttribute">'xlink:href'</a> must be used to link to the audio content. No visual representation shall be produced. However, content authors can if desired create graphical representations of control panels to start, stop, pause, rewind, or adjust the volume of audio content.

153

154

155

156

The <a href="multimedia.html#AudioElement">'audio'</a> element must reference content with an audio stream.

157

158

159

<div class="schema"><div class="schemaheader">Schema: audio<div class="schemasource"><pre> <define name='audio'>

160

161

162

163

</element>

164

</define>

165

166

167

168

169

170

171

172

173

174

175

</define>

176

177

178

179

180

181

182

183

184

</choice>

185

</zeroOrMore>

186

</define>

187

</pre></div></div></div>

188

189

190

191

Attribute definitions:

192

193

194

<dt><a id="AudioElementHrefAttribute" name="AudioElementHrefAttribute"></a> xlink:href = "<a href="types.html#DataTypeIRI"><IRI></a>"</dt>

195

<dd>An <a href="linking.html#IRIReference">IRI

196

reference</a>. An

197

<a href="intro.html#TermInvalidIRIReference">invalid IRI reference</a>

198

is an <a href="intro.html#TermUnsupportedValue">unsupported value</a>. An empty string value (xlink:href="")

199

disables playback of the element. The

200

<a href="intro.html#TermLacunaValue">lacuna value</a>

201

is the empty string.

202

When the value of this attribute is animated or otherwise modified,

203

if the media timeline can be controlled, then the media timeline is

204

restarted only if the

205

<a href="multimedia.html#SyncBehaviorAttribute">'syncBehavior'</a>

206

attribute is set to independent. If

207

the media timeline cannot be controlled, then the media timeline is

208

unaffected by such modification.

209

<a href="animate.html#Animatable">Animatable</a>:

210

yes.</dd>

211

212

213

214

<dd>The audio format. Implementations may choose not to fetch audios of formats that

215

they do not support. For optimizing download time by requiring a particular content format authors are encouraged to use

216

<a href="struct.html#RequiredFormatsAttribute">'requiredFormats'</a>, instead of <a href="multimedia.html#AudioElementTypeAttribute">'type'</a>.

217

218

<a href="animate.html#Animatable">Animatable</a>:

219

yes.</dd>

220

<dt>Runtime synchronization attributes</dt>

221

<dd>See <a href="multimedia.html#Smil2Sync">definition</a>.</dd>

222

<dt>SVG timing attributes</dt>

223

<dd>If the <a href="animate.html#FillAttribute">'fill'</a> attribute is

224

specified, it has no effect. See <a href="animate.html#TimingAttributes">definition</a>.</dd>

225

</dl>

226

</div>

227

228

229

The following example illustrates the use of the <a href="multimedia.html#AudioElement">'audio'</a> element. When the button is pushed, the audio file is played three times.

230

231

232

<div class="example"><div class="exampleheader">Example: media01.svg</div><div class="examplesource"><pre>

233

234

xmlns="http://www.w3.org/2000/svg"

235

xmlns:xlink="http://www.w3.org/1999/xlink">

236

237

<desc>SVG audio example</desc>

238

239

<audio xlink:href="ouch.ogg" audio-level="0.7" type="application/ogg"

240

begin="mybutton.click" repeatCount="3"/>

241

242

243

<rect width="150" height="50" x="20" y="20" rx="10"

244

fill="#ffd" stroke="#933" stroke-width="5"/>

245

<text x="95" y="55" text-anchor="middle" font-size="30"

246

fill="#933">Press Me</text>

247

</g>

248

249

250

251

</svg>

252

</pre></div><div class="exampleimage"><img alt="Rendering of media01.svg" src="examples/media01.png" /></div></div>

253

254

255

This specification does not mandate support for any particular audio format. Content can check for a particular audio codec with the <a href="struct.html#RequiredFormatsAttribute">'requiredFormats'</a> <a href="intro.html#TermConditionalProcessingAttribute">conditional processing attribute</a>.

256

257

258

259

<h2 id="VideoElement">12.3 The 'video' element</h2>

260

261

The <a href="multimedia.html#VideoElement">'video'</a> element specifies a video file which is to be rendered to provide synchronized video. The usual SMIL timing features are used to start and stop the video at the appropriate times. An <a href="multimedia.html#VideoElementHrefAttribute">'xlink:href'</a> must be used to link to the video content. It is assumed that the video content may also include an audio stream, since this is the usual way that video content is produced, and thus the audio shall be controlled by the <a href="multimedia.html#VideoElement">'video'</a> element's media attributes.

262

263

The <a href="multimedia.html#VideoElement">'video'</a> element must reference content with a video stream.

264

265

266

267

The <a href="multimedia.html#VideoElement">'video'</a> element produces a rendered result, and thus has <a href="multimedia.html#VideoElementWidthAttribute">'width'</a>, <a href="multimedia.html#VideoElementHeightAttribute">'height'</a>, <a href="multimedia.html#VideoElementXAttribute">'x'</a> and <a href="multimedia.html#VideoElementYAttribute">'y'</a> attributes.

268

269

270

The <a href="multimedia.html#VideoElement">'video'</a> element can have two different transform behaviors, either geometric or pinned, depending on the value of the <a href="multimedia.html#transformBehaviorAttribute">transformBehavior</a> attribute. If the transform behavior is geometric, the <a href="multimedia.html#VideoElement">'video'</a> element must establish a new viewport for the referenced document as described in <a href="coords.html#EstablishingANewViewport">Establishing a new viewport</a>. In this case, the <a href="multimedia.html#VideoElement">'video'</a> element supports the <a href="painting.html#viewport-fill-property">'viewport-fill'</a> and <a href="painting.html#viewport-fill-opacity-property">'viewport-fill-opacity'</a> properties. The bounds for the new viewport shall be defined by attributes <a href="multimedia.html#VideoElementXAttribute">'x'</a>, <a href="multimedia.html#VideoElementYAttribute">'y'</a>, <a href="multimedia.html#VideoElementWidthAttribute">'width'</a> and <a href="multimedia.html#VideoElementHeightAttribute">'height'</a>. The placement and scaling of the referenced video shall be controlled by the <a href="coords.html#PreserveAspectRatioAttribute">'preserveAspectRatio'</a> attribute on the <a href="multimedia.html#VideoElement">'video'</a> element. In the case of pinned transform behavior, a new viewport must not be established. As such, <a href="painting.html#viewport-fill-property">'viewport-fill'</a>, <a href="painting.html#viewport-fill-opacity-property">'viewport-fill-opacity'</a>, <a href="multimedia.html#VideoElementWidthAttribute">'width'</a>, <a href="multimedia.html#VideoElementHeightAttribute">'height'</a>, or <a href="coords.html#PreserveAspectRatioAttribute">'preserveAspectRatio'</a> have no effect.

271

272

The value of the <a href="coords.html#ViewBoxAttribute">'viewBox'</a> attribute to use when evaluating the <a href="coords.html#PreserveAspectRatioAttribute">'preserveAspectRatio'</a> attribute shall be defined by the referenced content. For content that clearly identifies a <a href="coords.html#ViewBoxAttribute">'viewBox'</a> that value shall be used. For most video content the bounds of the video should be used (i.e. the <a href="multimedia.html#VideoElement">'video'</a> element has an implicit <a href="coords.html#ViewBoxAttribute">'viewBox'</a> of "0 0 <var>video-width</var> <var>video-height</var>"). Where no value is readily available the

273

274

<a href="coords.html#ViewBoxAttribute">'preserveAspectRatio'</a> attribute shall be ignored.

275

276

277

<div class="schema"><div class="schemaheader">Schema: video<div class="schemasource"><pre> <define name='video'>

278

279

280

281

</element>

282

</define>

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

<value>geometric</value>

303

<value>pinned</value>

304

<value>pinned90</value>

305

<value>pinned180</value>

306

<value>pinned270</value>

307

</choice>

308

</attribute>

309

</optional>

310

311

312

313

314

315

</choice>

316

</attribute>

317

</optional>

318

</define>

319

320

321

322

323

324

325

326

327

</choice>

328

</zeroOrMore>

329

</define>

330

</pre></div></div></div>

331

332

333

334

335

Attribute definitions:

336

337

338

339

<dd>

340

The <var>x</var>-axis coordinate of the rectangular region into which the video is placed. The <a href="intro.html#TermLacunaValue">lacuna value</a>

341

is '0'.

342

If the transform behavior of the video is geometric, this coordinate is one corner of the rectangular region. If it is pinned, this coordinate is the pin point of the rectangular region.

343

See the <a href="multimedia.html#transformBehaviorAttribute">'transformBehavior'</a> attribute for the interpretation of this attribute.

344

345

<a href="animate.html#Animatable">Animatable</a>: yes.

346

</dd>

347

348

349

<dd>

350

The <var>y</var>-axis coordinate of the rectangular region into which the video is placed. The <a href="intro.html#TermLacunaValue">lacuna value</a>

351

is '0'.

352

If the transform behavior of the video is geometric, this coordinate is one corner of the rectangular region. If it is pinned, this coordinate is the pin point of the rectangular region.

353

See the <a href="multimedia.html#transformBehaviorAttribute">'transformBehavior'</a> for the interpretation of this attribute.

354

<a href="animate.html#Animatable">Animatable</a>: yes.

355

</dd>

356

357

<dt><a id="VideoElementWidthAttribute" name="VideoElementWidthAttribute"></a> width = "<a href="types.html#DataTypeLength"><length></a>"</dt>

358

<dd>The width of the rectangular region into which the

359

video is placed.

360

A negative value shall be treated as <a href="intro.html#TermUnsupportedValue">unsupported</a>.

361

The <a href="intro.html#TermLacunaValue">lacuna value</a>

362

is '0'.

363

If the transform behavior of the video is geometric, a value of zero shall disable rendering of the element. If it is pinned, this attribute shall have no effect on rendering.

364

365

<a href="animate.html#Animatable">Animatable</a>:

366

yes.</dd>

367

368

<dt><a id="VideoElementHeightAttribute" name="VideoElementHeightAttribute"></a> height = "<a href="types.html#DataTypeLength"><length></a>"</dt>

369

<dd>The height of the rectangular region into which the

370

video is placed.

371

A negative value shall be treated as <a href="intro.html#TermUnsupportedValue">unsupported</a>.

372

The <a href="intro.html#TermLacunaValue">lacuna value</a>

373

is '0'.

374

If the transform behavior of the video is geometric, a value of zero shall disable rendering of the element. If it is pinned, this attribute shall have no effect on rendering.

375

<a href="animate.html#Animatable">Animatable</a>:

376

yes.</dd>

377

378

<dt><a id="VideoElementHrefAttribute" name="VideoElementHrefAttribute"></a> xlink:href = "<a href="types.html#DataTypeIRI"><IRI></a>"</dt>

379

<dd>An <a href="intro.html#TermIRIReference">IRI reference</a> to the video content. An

380

<a href="intro.html#TermInvalidIRIReference">invalid IRI reference</a>

381

is an <a href="intro.html#TermUnsupportedValue">unsupported value</a>. An empty string value (xlink:href="") disables rendering of the element.

382

The <a href="intro.html#TermLacunaValue">lacuna value</a>

383

is the empty string.

384

When the value of this attribute is animated or otherwise modified,

385

if the media timeline can be controlled, then the media timeline is

386

restarted only if the

387

<a href="multimedia.html#SyncBehaviorAttribute">'syncBehavior'</a>

388

attribute is set to independent. If

389

the media timeline cannot be controlled, then the media timeline is

390

unaffected by such modification.

391

<a href="animate.html#Animatable">Animatable</a>:

392

yes.</dd>

393

394

<dt><a id="VideoElementPreserveAspectRatioAttribute" name="VideoElementPreserveAspectRatioAttribute"></a> preserveAspectRatio = [defer] <align> [<meet>]</dt>

395

<dd>Indicates whether or not to force uniform scaling. (See the <a href="coords.html#PreserveAspectRatioAttribute">'preserveAspectRatio'</a> for the syntax of <align> and the interpretation of this attribute.)

396

<a href="animate.html#Animatable">Animatable</a>: yes.</dd>

397

398

type = "<a href="types.html#DataTypeContentType"><content-type></a>"</dt>

399

<dd>The video format. Implementations may choose not to fetch videos of formats that

400

they do not support. For optimizing download time by requiring a particular content format authors are encouraged to use

401

<a href="struct.html#RequiredFormatsAttribute">'requiredFormats'</a>, instead of <a href="multimedia.html#VideoElementTypeAttribute">'type'</a>.

402

<a href="animate.html#Animatable">Animatable</a>: yes.</dd>

403

404

<dt><a id="VideoElementTransBehaviorAttribute" name="VideoElementTransBehaviorAttribute"></a> transformBehavior = "geometric" | "pinned" | "pinned90" | "pinned180" | "pinned270" </dt>

405

<dd>See <a href="multimedia.html#transformBehaviorAttribute">attribute definition</a> for description.

406

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

407

408

<dt><a id="VideoElementOverlayAttribute" name="VideoElementOverlayAttribute"></a> overlay = "top" | "none"</dt>

409

<dd>See <a href="multimedia.html#compositingBehaviorAttribute">attribute definition</a> for description.

410

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

411

<dt><a id="VideoInitialVisibilityAttribute" name="videoInitialVisibilityAttribute"></a>initialVisibility = "whenStarted" | "always"</dt>

412

<dd>See <a href="multimedia.html#initialVisibilityMediaAttribute">attribute definition</a> for description.

413

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

414

415

<dt><a id="VideoFocusableAttribute" name="videoFocusableAttribute"></a> focusable = "true" | "false" | "auto"</dt>

416

<dd>See <a href="interact.html#focusable-attr">attribute definition</a> for description.

417

<a href="animate.html#Animatable">Animatable</a>: yes.</dd>

418

<dt>Navigation Attributes</dt>

419

<dd>See <a href="interact.html#specifyingnavigation">definition</a>.</dd>

420

421

<dt>Runtime synchronization attributes</dt>

422

<dd>See <a href="multimedia.html#Smil2Sync">definition</a>.</dd>

423

<dt>SVG timing attributes</dt>

424

<dd>See <a href="animate.html#TimingAttributes">definition</a>.</dd>

425

</dl>

426

427

</div>

428

429

430

431

The following example illustrates the use of the <a href="multimedia.html#VideoElement">'video'</a> element. The video content is partially obscured by other graphics elements. This example shows the <a href="multimedia.html#VideoElement">'video'</a> element being rendered into an offscreen buffer and then transformed and composited in the normal way, so that it behaves like any other graphical primitive such as an image or a rectangle. In this manner, the <a href="multimedia.html#VideoElement">'video'</a> element may be scaled, rotated, skewed, displayed at various sizes, and animated.

432

433

434

435

<div class="example"><div class="exampleheader">Example: media02.svg</div><div class="examplesource"><pre><svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"

436

xmlns:xlink="http://www.w3.org/1999/xlink"

437

width="420" height="340" viewBox="0 0 420 340">

438

<desc>SVG 1.2 video example</desc>

439

<g>

440

441

<video xlink:href="noonoo.avi" audio-level=".8" type="video/x-msvideo"

442

width="320" height="240" x="50" y="50" repeatCount="indefinite"/>

443

444

<rect x="1" y="1" width="418" height="338" fill="none"

445

stroke="#777" stroke-width="1"/>

446

</g>

447

</svg>

448

</pre></div><div class="exampleimage"><img alt="Rendering of media02.svg" src="examples/media02.png" /></div></div>

449

450

451

<a href="examples/noonoo.svg">Show this example</a> of the <a href="multimedia.html#VideoElement">'video'</a> element (requires an SVG Tiny 1.2 viewer and support for a Windows AVI using Motion JPEG; this is a 3.7M video file).

452

453

454

455

This specification does not mandate support for any particular video format. Content can check for a particular video codec with the <a href="struct.html#RequiredFormatsAttribute">'requiredFormats'</a> <a href="intro.html#TermConditionalProcessingAttribute">conditional processing attribute</a>.

456

457

458

The content creator should be aware that video is a feature that may not be available on all target devices. In order to create interoperable content the content creator should provide a fall-back alternative by using the <a href="struct.html#SwitchElement">'switch'</a> element. The following feature string is defined for checking for video support: http://www.w3.org/Graphics/SVG/feature/1.2/#Video. Video may not be completely supported on a resource limited device. SVG Tiny 1.2 introduces more granular video rendering control to provide reproducible results in all environments. This control is documented in the two following sections.

459

460

<h3 id="transformBehavior">12.3.1 Restricting the transformation of the 'video' element</h3>

461

Transforming video is an expensive operation that should be used with caution, especially on content targeted for mobile devices. Using transformed video may also lead to non-interoperable content since not all devices will support this feature. To give the content creator control over video transformation, SVG Tiny 1.2 introduces the <a href="multimedia.html#transformBehaviorAttribute">'transformBehavior'</a> attribute and a corresponding feature string: http://www.w3.org/Graphics/SVG/feature/1.2/#TransformedVideo. A viewer supporting video transformation must treat the <a href="multimedia.html#VideoElement">'video'</a> element like any other element regarding transformations. A viewer not supporting video transformation must treat the video as a point (given by the <a href="multimedia.html#VideoElementXAttribute">'x'</a> and <a href="multimedia.html#VideoElementYAttribute">'y'</a> attributes). The <a href="multimedia.html#VideoElementWidthAttribute">'width'</a> and <a href="multimedia.html#VideoElementHeightAttribute">'height'</a> attributes shall be ignored if present and instead the width and height (in device pixels) shall be taken from the media itself. The video must be displayed with its center aligned with the origin of the local coordinate system.

462

463

A content creator can use the <a href="multimedia.html#transformBehaviorAttribute">'transformBehavior'</a> attribute to explicitly choose the transform behavior on a viewer supporting transformed video. This might be of interest to increase the performance of content targeting restricted devices.

464

465

466

467

468

Attribute definition:

469

470

471

472

<dt><a id="transformBehaviorAttribute" name="transformBehaviorAttribute"></a> transformBehavior = "geometric" | "pinned" | "pinned90" | "pinned180" | "pinned270"</dt>

473

474

<dd>

475

Defines whether a video is transformed/resampled (in essence treated as a geometric rectangle) or pinned/unresampled (i.e., treated as a pin point for a non-geometric blit region).

476

The attribute can take one of the five following values:

477

478

<dt>geometric</dt>

479

<dd>The media shall be treated as a geometric rectangle in the local coordinate

480

system, defined by <a href="multimedia.html#VideoElementXAttribute">'x'</a>,

481

<a href="multimedia.html#VideoElementYAttribute">'y'</a>,

482

<a href="multimedia.html#VideoElementWidthAttribute">'width'</a> and

483

<a href="multimedia.html#VideoElementHeightAttribute">'height'</a>

484

attributes. The media must be resampled to fill the rectangle

485

and is subject to transformation. This is the <a href="intro.html#TermLacunaValue">lacuna value</a>.

486

</dd>

487

488

<dt>pinned</dt>

489

<dd>The video is displayed without rotation.</dd>

490

<dt>pinned90</dt>

491

<dd>The video is displayed with a fixed rotation equivalent to the effect of transform="rotate(90)".</dd>

492

<dt>pinned180</dt>

493

<dd>The video is displayed with a fixed rotation equivalent to the effect of transform="rotate(180)". </dd>

494

<dt>pinned270</dt>

495

<dd>The video is displayed with a fixed rotation equivalent to the effect of transform="rotate(270)". </dd>

496

497

</dl>

498

499

500

If one of the four values 'pinned',

501

'pinned90',

502

'pinned180' and

503

'pinned270' is specified,

504

the media shall be treated as a point, defined by <a href="multimedia.html#VideoElementXAttribute">'x'</a> and

505

<a href="multimedia.html#VideoElementYAttribute">'y'</a> attributes. This

506

point must be transformed to the nearest actual device pixel. Video at

507

the native resolution given by the media shall then be painted on a region

508

whose center is the pin point and whose width and height are

509

defined by the media. The pixels must be aligned to the device pixel grid

510

and there shall be no resampling.

511

The values of the <a href="multimedia.html#VideoElementWidthAttribute">'width'</a>

512

and <a href="multimedia.html#VideoElementHeightAttribute">'height'</a>

513

attributes in this case shall have no effect on the rendering of the video.

514

515

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

516

</dl>

517

</div>

518

519

520

<h3 id="compositingBehavior">12.3.2 Restricting compositing of the 'video' element</h3>

521

For the same reasons as restricting transformations the content creator might need to restrict the compositing of video with other elements. Not all devices support compositing of the video element with other content. In that case it is necessary to render the video on top of all other svg content. SVG Tiny 1.2 therefore introduces the <a href="multimedia.html#compositingBehaviorAttribute">'overlay'</a> attribute and a corresponding feature string: http://www.w3.org/Graphics/SVG/feature/1.2/#ComposedVideo. A viewer supporting compositing of video must render the <a href="multimedia.html#VideoElement">'video'</a> element according to the SVG painter's model, and thus graphical elements might be rendered on top of the video. A viewer not supporting video compositing must always render the video on top of all other SVG elements.

522

523

A content creator can use the <a href="multimedia.html#compositingBehaviorAttribute">'overlay'</a> attribute to explicitly choose the compositing behavior on a viewer supporting composited video. This may increase the performance of content that is targeted at restricted devices.

524

525

526

527

528

Attribute definition:

529

530

531

<dt id="OverlayAttribute"><a id="compositingBehaviorAttribute" name="compositingBehaviorAttribute"></a> overlay = "top" | "none"</dt>

532

<dd>

533

534

Defines whether a <a href="multimedia.html#VideoElement">'video'</a>

535

is rendered according to the SVG painter's model or if it must be

536

positioned on top of all other SVG elements.

537

538

539

The attribute value can be either of the following:

540

541

542

543

<dd>The <a href="multimedia.html#VideoElement">'video'</a> element must not be composited on to the background as usual. Instead a temporary video canvas must be set aside and drawn last in the whole document's compositing process.</dd>

544

545

<dd>The <a href="multimedia.html#VideoElement">'video'</a> must be rendered according to the SVG painter's model. This is the <a href="intro.html#TermLacunaValue">lacuna value</a>.</dd>

546

</dl>

547

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

548

</dl>

549

</div>

550

551

552

553

If multiple <a href="multimedia.html#VideoElement">'video'</a> elements have overlay="top", the drawing order of those <a href="multimedia.html#VideoElement">'video'</a> elements follows the typical SVG rendering order.

554

555

556

<h3 id="restrictedVideoExample">12.3.3 Examples</h3>

557

The following example illustrates the use of the http://www.w3.org/Graphics/SVG/feature/1.2/#TransformedVideo feature string. A <a href="struct.html#SwitchElement">'switch'</a> element is wrapped around two groups. The first group will render a scaled and rotated video sequence on a viewer supporting video transformations while the second group will render the untransformed video on viewers that don't support video transformations.

558

559

<div class="example"><div class="exampleheader">Example: <a href="examples/media04.svg">media04.svg</a></div><div class="examplesource"><pre><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg"

560

xmlns:xlink="http://www.w3.org/1999/xlink"

561

width="100%" height="100%" viewBox="0 0 400 300">

562

<desc>Example of switching on the http://www.w3.org/Graphics/SVG/feature/1.2/#TransformedVideo feature string</desc>

563

564

565

566

<g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TransformedVideo"

567

transform="translate(-21,-34) scale(1.24) rotate(-30)">

568

<rect x="6" y="166" width="184" height="140" fill="none" stroke="blue"

569

stroke-width="4" />

570

<video xlink:href="ski.avi" audio-level=".8" type="video/x-msvideo"

571

x="10" y="170" width="176" height="132"/>

572

</g>

573

574

575

<g>

576

<rect x="6" y="166" width="184" height="140" fill="none" stroke="blue"

577

stroke-width="4"/>

578

<video xlink:href="ski.avi" audio-level=".8" type="video/x-msvideo"

579

x="98" y="236"/>

580

</g>

581

</switch>

582

</svg>

583

</pre></div><div class="exampleimage"><img alt="Rendering of media04.svg" src="examples/media04.png" /></div></div>

584

585

586

The above images show the rendering of Example media04 in

587

two SVG user agents: the first one supporting transformed video (on the left) and the

588

second one not (on the right).

589

590

591

The following example illustrates the use of the http://www.w3.org/Graphics/SVG/feature/1.2/#ComposedVideo feature string. A <a href="struct.html#SwitchElement">'switch'</a> element is wrapped around two groups. The first group must render a video with text composited on top on viewers supporting composed video while the second group must render a video with text placed above the video on viewers that do not support composed video.

592

593

<div class="example"><div class="exampleheader">Example: <a href="examples/media05.svg">media05.svg</a></div><div class="examplesource"><pre><?xml version="1.1"?>

594

595

xmlns:xlink="http://www.w3.org/1999/xlink"

596

width="100%" height="100%" viewBox="0 0 400 300">

597

<desc>Example of switching on the http://www.w3.org/Graphics/SVG/feature/1.2/#ComposedVideo feature string</desc>

598

<rect x="2" y="2" width="396" height="296" fill="none" stroke="black"

599

stroke-width="2" />

600

<rect x="106" y="66" width="184" height="140" fill="none" stroke="blue"

601

stroke-width="4" />

602

603

604

605

606

607

<video xlink:href="ski.avi" audio-level=".8" type="video/x-msvideo"

608

x="10" y="70" width="176" height="132"/>

609

<text x="20" y="100" fill-opacity="0.5" fill="blue" font-size="20">Composited title.</text>

610

</g>

611

612

613

614

<video xlink:href="ski.avi" audio-level=".8" type="video/x-msvideo"

615

x="10" y="70" overlay="top" width="176" height="132"/>

616

<text x="15" y="60" fill="blue" fill-opacity="0.5" >Non-composited title.</text>

617

</g>

618

</switch>

619

</svg>

620

</pre></div></div>

621

622

623

624

</div>

625

626

627

The above images show the rendering of Example media05 in

628

two SVG user agents: the first one supporting composed video (on the left) and the

629

second one not (on the right).

630

631

632

<h2 id="AnimationElement">12.4 The 'animation' element</h2>

633

634

635

The <a href="multimedia.html#AnimationElement">'animation'</a> elements specifies an SVG document providing synchronized animated vector graphics. Like <a href="multimedia.html#VideoElement">'video'</a>, the <a href="multimedia.html#AnimationElement">'animation'</a> element is a graphical object with size determined by its

636

<a href="multimedia.html#AnimationElementXAttribute">'x'</a>,

637

<a href="multimedia.html#AnimationElementYAttribute">'y'</a>,

638

<a href="multimedia.html#AnimationElementWidthAttribute">'width'</a> and

639

<a href="multimedia.html#AnimationElementHeightAttribute">'height'</a>

640

attributes. Furthermore, the <a href="multimedia.html#AnimationElement">'animation'</a> element supports timing and synchronization attributes which allow multiple animations to run with independent timelines

641

in the same SVG document.

642

Just like <a href="multimedia.html#VideoElement">'video'</a> and

643

<a href="struct.html#ImageElement">'image'</a>, the

644

<a href="multimedia.html#AnimationElement">'animation'</a> element must not point to document

645

fragments within SVG files.

646

647

648

An <a href="multimedia.html#AnimationElement">'animation'</a> element establishes a new viewport for the referenced

649

file as described in

650

<a href="coords.html#EstablishingANewViewport">Establishing a new viewport</a>. The bounds for the new viewport are defined by attributes

651

<a href="multimedia.html#AnimationElementXAttribute">'x'</a>,

652

<a href="multimedia.html#AnimationElementYAttribute">'y'</a>,

653

<a href="multimedia.html#AnimationElementWidthAttribute">'width'</a> and

654

<a href="multimedia.html#AnimationElementHeightAttribute">'height'</a>.

655

The <a href="coords.html#PreserveAspectRatioAttribute">'preserveAspectRatio'</a> attribute on the <a href="intro.html#TermRootmostSVGElement">rootmost 'svg' element</a> in the referenced SVG document shall be

656

ignored (as are its <a href="struct.html#SVGElementWidthAttribute">'width'</a> and <a href="struct.html#SVGElementHeightAttribute">'height'</a> attributes). Instead, the

657

<a href="coords.html#PreserveAspectRatioAttribute">'preserveAspectRatio'</a> attribute on the referencing <a href="multimedia.html#AnimationElement">'animation'</a> element shall define how the

658

SVG content is fitted into the viewport. The same rule applies for the

659

<a href="painting.html#viewport-fill-property">'viewport-fill'</a>

660

and <a href="painting.html#viewport-fill-opacity-property">'viewport-fill-opacity'</a> properties.

661

662

663

The value of the <a href="coords.html#ViewBoxAttribute">

664

'viewBox'</a>

665

attribute to use when evaluating the

666

<a href="coords.html#PreserveAspectRatioAttribute">'preserveAspectRatio'</a> attribute is defined by the referenced document's

667

<a href="coords.html#ViewBoxAttribute">'viewBox'</a> value.

668

When no value is available the

669

<a href="coords.html#PreserveAspectRatioAttribute">'preserveAspectRatio'</a>

670

attribute must be ignored, and only the translation due to the

671

<a href="multimedia.html#AnimationElementXAttribute">'x'</a> and

672

673

attributes of the viewport must be used to display the content.

674

675

676

The referenced SVG document represents a separate document which

677

generates its own parse tree and document object model. Thus, there is

678

no inheritance of properties into the referenced animation. For details,

679

see <a href="linking.html#externalReferences">Processing of external references to documents</a>.

680

681

682

The SVG specification does not specify when an animation that is not

683

being displayed should be loaded. A user agent is not required to load

684

animation data for an animation that is not displayed (e.g.

685

display="none"). However, it should be noted that this may cause a delay

686

when an animation becomes visible for the first time. In the case where

687

an author wants to suggest that the user agent load animation data

688

before it is displayed, they should use the <a href="struct.html#PrefetchElement">'prefetch'</a> element.

689

690

691

<div class="schema"><div class="schemaheader">Schema: animation<div class="schemasource"><pre> <define name='animation'>

692

693

694

695

</element>

696

</define>

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

</define>

713

714

715

716

717

718

719

720

721

</choice>

722

</zeroOrMore>

723

</define>

724

</pre></div></div></div>

725

726

727

Attribute definitions:

728

729

730

<dd>The <var>x</var>-axis coordinate of one corner of the rectangular

731

region into which the animation is placed.

732

The <a href="intro.html#TermLacunaValue">lacuna value</a>

733

is '0'.

734

<a href="animate.html#Animatable">Animatable</a>:

735

yes.</dd>

736

737

738

<dd>The <var>y</var>-axis coordinate of one corner of the rectangular

739

region into which the animation is placed.

740

The <a href="intro.html#TermLacunaValue">lacuna value</a>

741

is '0'.

742

<a href="animate.html#Animatable">Animatable</a>:

743

yes.</dd>

744

745

<dt><a id="AnimationElementWidthAttribute" name="AnimationElementWidthAttribute"></a> width = "<a href="types.html#DataTypeLength"><length></a>"</dt>

746

<dd>The width of the rectangular region into which the

747

animation is placed.

748

A negative value is <a href="intro.html#TermUnsupportedValue">unsupported</a>.

749

A value of zero must disable rendering of the element.

750

The <a href="intro.html#TermLacunaValue">lacuna value</a>

751

is '0'.

752

<a href="animate.html#Animatable">Animatable</a>:

753

yes.</dd>

754

755

<dt><a id="AnimationElementHeightAttribute" name="AnimationElementHeightAttribute"></a> height = "<a href="types.html#DataTypeLength"><length></a>"</dt>

756

<dd>The height of the rectangular region into which the

757

animation is placed.

758

A negative value is <a href="intro.html#TermUnsupportedValue">unsupported</a>.

759

A value of zero must disable rendering of the element.

760

The <a href="intro.html#TermLacunaValue">lacuna value</a>

761

is '0'.

762

<a href="animate.html#Animatable">Animatable</a>:

763

yes.</dd>

764

765

<dt><a id="AnimationElementHrefAttribute" name="AnimationElementHrefAttribute"></a> xlink:href = "<a href="types.html#DataTypeIRI"><IRI></a>"</dt>

766

<dd>An <a href="intro.html#TermIRIReference">IRI

767

reference</a> to the animation data. An

768

<a href="intro.html#TermInvalidIRIReference">invalid IRI reference</a>

769

is an <a href="intro.html#TermUnsupportedValue">unsupported value</a>. An empty attribute value (xlink:href="") disables rendering of the element.

770

The <a href="intro.html#TermLacunaValue">lacuna value</a>

771

is the empty string.

772

When the value of this attribute is animated or otherwise modified,

773

if the media timeline can be controlled, then the media timeline is

774

restarted only if the

775

<a href="multimedia.html#SyncBehaviorAttribute">'syncBehavior'</a>

776

attribute is set to independent. If

777

the media timeline cannot be controlled, then the media timeline is

778

unaffected by such modification.

779

<a href="animate.html#Animatable">Animatable</a>:

780

yes.</dd>

781

782

<dt><a id="AnimationElementPreserveAspectRatioAttribute" name="AnimationElementPreserveAspectRatioAttribute"></a> preserveAspectRatio = ["defer"] <align> [<meet>]</dt>

783

<dd>Indicates whether or not to force uniform scaling. (See <a href="coords.html#PreserveAspectRatioAttribute">The 'preserveAspectRatio' attribute</a> for the

784

syntax of <align> and the interpretation of this attribute.)

785

<a href="animate.html#Animatable">Animatable</a>:

786

yes.</dd>

787

788

<dt><a id="AnimationInitialVisibilityAttribute" name="animationInitialVisibilityAttribute"></a>initialVisibility = "whenStarted" | "always"</dt>

789

<dd>See <a href="multimedia.html#initialVisibilityMediaAttribute">attribute definition</a> for description.

790

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

791

792

<dt><a id="AnimationFocusableAttribute" name="animationFocusableAttribute"></a> focusable = "true" | "false" | "auto"</dt>

793

<dd>See <a href="interact.html#focusable-attr">attribute definition</a> for description.

794

<a href="animate.html#Animatable">Animatable</a>: yes.</dd>

795

<dt>Navigation Attributes</dt>

796

<dd>See <a href="interact.html#specifyingnavigation">definition</a>.</dd>

797

798

<dt>Runtime synchronization attributes</dt>

799

<dd>See <a href="multimedia.html#Smil2Sync">definition</a>.</dd>

800

<dt>SVG timing attributes</dt>

801

<dd>See <a href="animate.html#TimingAttributes">definition</a>.</dd>

802

803

</dl>

804

805

806

807

</div>

808

809

810

The example below shows basic usage of the <a href="multimedia.html#AnimationElement">'animation'</a> element. For another example, see the <a href="linking.html#useVsAnimationExample">use and animation example</a> in the Linking chapter.

811

812

<div class="example"><div class="exampleheader">Example: media03.svg</div><div class="examplesource"><pre>

813

814

xmlns:xlink="http://www.w3.org/1999/xlink"

815

version="1.2" baseProfile="tiny">

816

<desc>Example of two animation elements pointing to the same content.</desc>

817

818

<animation begin="1" dur="3" repeatCount="1.5" fill="freeze"

819

x="100" y="100" width="50" height="50"

820

xlink:href="bouncingBall.svg"/>

821

822

<animation begin="2" x="300" y="100" width="50" height="50"

823

xlink:href="bouncingBall.svg"/>

824

</svg>

825

</pre></div></div>

826

827

<h2 id="AudioLevelProperty">12.5 The 'audio-level' property</h2>

828

829

830

The <a href="multimedia.html#AudioLevelProperty">'audio-level'</a> property can be applied to the <a href="multimedia.html#AudioElement">'audio'</a>, <a href="multimedia.html#VideoElement">'video'</a>

831

and <a href="multimedia.html#AnimationElement">'animation'</a> elements described above, the <a href="struct.html#UseElement">'use'</a> element,

832

plus <a href="intro.html#TermContainerElement">container elements</a>

833

such as the <a href="struct.html#GElement">'g'</a> element.

834

835

836

837

<dl>

838

<dt>

839

'audio-level'

840

</dt>

841

<dd>

842

843

844

<td>Value:</td>

845

<td> <number> | <a class="noxref" href="http://www.w3.org/TR/CSS2/cascade.html#value-def-inherit"> inherit</a>

846

</td></tr>

847

848

<td>Initial:</td>

849

<td> 1.0

850

</td></tr>

851

852

<td>Applies to:</td>

853

<td> <a href="intro.html#TermMediaElement">media elements</a>, <a href="struct.html#UseElement">'use'</a> and <a href="intro.html#TermContainerElement">container elements</a>

854

</td></tr>

855

856

<td>Inherited:</td>

857

<td> no

858

</td></tr>

859

860

<td>Percentages:</td>

861

<td> N/A

862

</td></tr>

863

864

<td>Media:</td>

865

<td> visual, audio

866

</td></tr>

867

868

<td>Animatable:</td>

869

<td> yes

870

</td></tr>

871

872

<td>Computed value: </td>

873

<td> Specified value, except inherit

874

</td></tr>

875

</table>

876

</dd></dl></div>

877

878

879

The <a href="multimedia.html#AudioLevelProperty">'audio-level'</a> property specifies a value that

880

is used to calculate the volume of a particular element. Values below 1.0

881

decrease it and a value of zero silences it.

882

883

884

885

An element's volume is the product of its clamped

886

<a href="multimedia.html#AudioLevelProperty">'audio-level'</a> property and either the clamped

887

computed value of its parent, or the initial value (1.0) if it has no parent.

888

Audio level clamping occurs for any values outside the range 0.0 (silent) to

889

1.0 (system volume). (See <a href="implnote.html#RangeClamping">Clamping

890

values which are restricted to a particular range</a>.)

891

892

893

894

This sentence is informative: An element's volume cannot be louder than the

895

volume of its parent.

896

897

898

899

The output signal level is calculated using the logarithmic scale described below (where <var>vol</var> is the value of the element volume):

900

901

902

<pre>dB change in signal level = 20 * log10(vol)</pre>

903

904

User agents may limit the actual signal level to some maximum, based on user preferences and hardware limitations.

905

906

907

If the element has an element volume of 0, then the output signal must be inaudible. If the element has an element volume of 1, then the output signal must be at the system volume level. Neither the <a href="multimedia.html#AudioLevelProperty">'audio-level'</a> property nor the element volume override the system volume setting.

908

909

910

911

912

<h2 id="Smil2Sync">12.6 Attributes for runtime synchronization</h2>

913

914

SVG Tiny 1.2 supports the five attributes listed below from <a href="../../2005/REC-SMIL2-20051213/index.html">SMIL 2.1</a> to control runtime synchronization of timed elements.

915

In SVG Tiny 1.2 the <a href="multimedia.html#SyncBehaviorAttribute">'syncBehavior'</a>, <a href="multimedia.html#SyncToleranceAttribute">'syncTolerance'</a> and <a href="multimedia.html#SyncMasterAttribute">'syncMaster'</a> attributes can be specified on the <a href="multimedia.html#AudioElement">'audio'</a>, <a href="multimedia.html#VideoElement">'video'</a> and <a href="multimedia.html#AnimationElement">'animation'</a> elements.

916

The <a href="multimedia.html#SyncBehaviorDefaultAttribute">'syncBehaviorDefault'</a> and <a href="multimedia.html#SyncToleranceDefaultAttribute">'syncToleranceDefault'</a> attributes can be specified on the <a href="struct.html#SVGElement">'svg'</a> element.

917

918

919

920

Attribute definitions:

921

922

<dt><a id="SyncBehaviorAttribute" name="syncBehaviorAttribute"></a> syncBehavior = "canSlip" | "locked" | "independent" | "default"</dt>

923

<dd>

924

925

See the <a href="http://www.w3.org/TR/2005/REC-SMIL2-20051213/smil-timing#adef-syncBehavior">SMIL 2.1 definition of 'syncBehavior'</a>

926

([<a href="refs.html#ref-SMIL21">SMIL21</a>], section 10.4.1).

927

928

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

929

930

<dt><a id="SyncBehaviorDefaultAttribute" name="syncBehaviorDefaultAttribute"></a> syncBehaviorDefault = "canSlip" | "locked" | "independent" | "inherit"</dt>

931

<dd>

932

933

See the <a href="http://www.w3.org/TR/2005/REC-SMIL2-20051213/smil-timing#adef-syncBehaviorDefault">SMIL 2.1 definition of 'syncBehaviorDefault'</a>

934

([<a href="refs.html#ref-SMIL21">SMIL21</a>], section 10.4.1).

935

936

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

937

938

<dt><a id="SyncToleranceAttribute" name="syncToleranceAttribute"></a> syncTolerance = "<a href="types.html#DataTypeClock-value"><Clock-value></a>" | "default"</dt>

939

<dd>

940

941

See the <a href="http://www.w3.org/TR/2005/REC-SMIL2-20051213/smil-timing#adef-syncTolerance">SMIL 2.1 definition of 'syncTolerance'</a>

942

([<a href="refs.html#ref-SMIL21">SMIL21</a>], section 10.4.1).

943

944

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

945

946

<dt><a id="SyncToleranceDefaultAttribute" name="syncToleranceDefaultAttribute"></a> syncToleranceDefault = "<a href="types.html#DataTypeClock-value"><Clock-value></a>" | "inherit"</dt>

947

<dd>

948

949

See the <a href="http://www.w3.org/TR/2005/REC-SMIL2-20051213/smil-timing#adef-syncToleranceDefault">SMIL 2.1 definition of 'syncToleranceDefault'</a>

950

([<a href="refs.html#ref-SMIL21">SMIL21</a>], section 10.4.1).

951

952

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

953

954

<dt><a id="SyncMasterAttribute" name="syncMasterAttribute"></a> syncMaster = "<a href="types.html#DataTypeBoolean"><boolean></a>"</dt>

955

<dd>

956

957

See the <a href="http://www.w3.org/TR/2005/REC-SMIL2-20051213/smil-timing#adef-syncMaster">SMIL 2.1 definition of 'syncMaster'</a>

958

([<a href="refs.html#ref-SMIL21">SMIL21</a>], section 10.4.1).

959

960

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

961

</dl>

962

</div>

963

964

<h4 id="SyncExample">Example: video content synchronized with some text</h4>

965

The two files below illustrate how it is possible to make sure some video content can be synchronized with some text using the synchronization attributes.

966

<div class="example"><div class="exampleheader">Example: <a href="examples/sync-attr-main.svg">sync-attr-main.svg</a></div><div class="examplesource"><pre><?xml version="1.0"?>

967

968

xmlns:xlink="http://www.w3.org/1999/xlink"

969

version="1.2" baseProfile="tiny"

970

viewBox="0 0 400 100" height="100%" width="100%" syncBehaviorDefault="locked">

971

972

<title>Sync* Attributes</title>

973

<desc>An example which illustrates the use of sync* attributes</desc>

974

975

<video x="10" y="10" xml:id="myclip"

976

xlink:href="rtsp://www.example.org/mysong.m4v" syncMaster="true"/>

977

978

</svg> </pre></div></div>

979

980

<div class="example"><div class="exampleheader">Example: <a href="examples/timed-lyrics.svg">timed-lyrics.svg</a></div><div class="examplesource"><pre><?xml version="1.0"?>

981

982

xmlns:xlink="http://www.w3.org/1999/xlink"

983

version="1.2" baseProfile="tiny"

984

viewBox="0 0 400 100" height="100%" width="100%">

985

986

<title>Synchronizing lyrics with video</title>

987

<desc>This document contains the textual lyrics to synchronize with some video content in the referencing document</desc>

988

989

990

991

992

<text xml:id="Text10" display="none">simulating some lyrics</text>

993

994

<text xml:id="Text20" display="none">displayed synchronously</text>

995

996

<text xml:id="Text30" display="none">with some video</text>

997

998

<text xml:id="Text40" display="none">in a different document</text>

999

1000

</g>

1001

</svg> </pre></div></div>

1002

Since the timed elements (<a href="multimedia.html#VideoElement">'video'</a> and <a href="multimedia.html#AnimationElement">'animation'</a>) do not specify their runtime synchronization behavior using the <a href="multimedia.html#SyncBehaviorAttribute">'syncBehavior'</a> attribute, the behavior is deduced from the <a href="multimedia.html#SyncBehaviorDefaultAttribute">'syncBehaviorDefault'</a> attribute on the nearest ancestor, in this case on the <a href="struct.html#SVGElement">'svg'</a> element.

1003

This attribute has the value 'locked', which means that all the <a href="intro.html#TermTimedElement">timed elements</a> in the subtree share the same timeline. In this case, the main scene timeline, the <a href="multimedia.html#VideoElement">'video'</a> and <a href="multimedia.html#AnimationElement">'animation'</a> timelines are then locked to each other.

1004

Then, the master is given to the video, which means that if the video is stalled in the streaming session, the timeline of the video will be paused and, as a consequence, the timeline of the lyrics and of the main scene will be paused as well.

1005

1006

<h2 id="initialVisibilityMediaAttribute">12.7 The 'initialVisibility' attribute</h2>

1007

1008

The <a href="multimedia.html#InitialVisibilityAttribute">'initialVisibility'</a> attribute applies to visual media elements (<a href="multimedia.html#VideoElement">'video'</a> and <a href="multimedia.html#AnimationElement">'animation'</a>) and is used to control the visibility of the media object before its first active duration period has started. A visible media element that is visible before activation shall have its first frame displayed. For an <a href="multimedia.html#AnimationElement">'animation'</a> element this means the referenced file rendered at time 0. For a <a href="multimedia.html#VideoElement">'video'</a> element it means the first frame of the video sequence.

1009

1010

1011

1012

Attribute definition:

1013

1014

<dt><a id="InitialVisibilityAttribute" name="initialVisibilityAttribute"></a> initialVisibility = "whenStarted" | "always"</dt>

1015

<dd>Controls the visibility of the media object before its first active duration period has started.

1016

The attribute value can be either of the following:

1017

1018

<dt>whenStarted</dt>

1019

<dd>The <a href="intro.html#TermLacunaValue">lacuna value</a>. Indicates that the media object is not displayed, as though the element had display="none", until its first active duration starts.

1020

</dd>

1021

<dt>always</dt>

1022

<dd>The media element is visible from the initialization of the parent time container (i.e. time 0 of the parent SVG document).

1023

During this time, and until the active duration starts, the media element is initialized but remains <a href="intro.html#TermInactiveElement">inactive</a>.</dd>

1024

</dl>

1025

<a href="animate.html#Animatable">Animatable</a>: no.</dd>

1026

</dl>

1027

</div>

1028

1029

1030

1031

1032

SVG Tiny 1.2 – 20081222

1033

<ul>

1034

1035

<li><a href="expanded-toc.html">Contents</a></li>

1036

<li><a href="painting.html">Previous</a></li>

1037

1038

<li><a href="elementTable.html">Elements</a></li>

1039

<li><a href="attributeTable.html">Attributes</a></li>

1040

</ul>

1041

</div>

1042

1043

</body>

1044

</html>