chunked/ch22.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Chapter 22. HTML 5 audio and video block macros</title><link rel="stylesheet" type="text/css" href="docbook-xsl.css" /><meta name="generator" content="DocBook XSL Stylesheets V1.79.1" /><link rel="home" href="index.html" title="AsciiDoc User Guide" /><link rel="up" href="index.html" title="AsciiDoc User Guide" /><link rel="prev" href="ch21.html" title="Chapter 21. Macros" /><link rel="next" href="ch23.html" title="Chapter 23. Tables" /></head><body><div class="navheader"><table width="100%" summary="Navigation header"><tr><td width="20%" align="left"><a accesskey="p" href="ch21.html"><img src="images/icons/prev.png" alt="Prev" /></a> </td><th width="60%" align="center"> </th><td width="20%" align="right"> <a accesskey="n" href="ch23.html"><img src="images/icons/next.png" alt="Next" /></a></td></tr></table><hr /></div><div class="chapter"><div class="titlepage"><div><div><h1 class="title"><a id="X98"></a>Chapter 22. HTML 5 audio and video block macros</h1></div></div></div><p>The <span class="emphasis"><em>html5</em></span> backend <span class="emphasis"><em>audio</em></span> and <span class="emphasis"><em>video</em></span> block macros generate the HTML
5 <span class="emphasis"><em>audio</em></span> and <span class="emphasis"><em>video</em></span> elements respectively.  They follow the usual
AsciiDoc block macro syntax <code class="literal">&lt;name&gt;::&lt;target&gt;[&lt;attrlist&gt;]</code> where:</p><div class="horizontal"><table class="horizontal" cellpadding="4px" style="border: none;"><colgroup><col /><col /></colgroup><tbody valign="top"><tr><td style="" valign="top">
<p>
<code class="literal">&lt;name&gt;</code>
</p>
</td><td style="" valign="top">
<p>
<span class="emphasis"><em>audio</em></span> or <span class="emphasis"><em>video</em></span>.
</p>
</td></tr><tr><td style="" valign="top">
<p>
<code class="literal">&lt;target&gt;</code>
</p>
</td><td style="" valign="top">
<p>
The URL or file name of the video or audio file.
</p>
</td></tr><tr><td style="" valign="top">
<p>
<code class="literal">&lt;attrlist&gt;</code>
</p>
</td><td style="" valign="top">
<p>
A list of named attributes (see below).
</p>
</td></tr></tbody></table></div><div class="table"><a id="idm2649"></a><p class="title"><strong>Table 22.1. Audio macro attributes</strong></p><div class="table-contents"><table class="table" summary="Audio macro attributes" cellpadding="4px" style="border-collapse: collapse;border-top: 3px solid #527bbd; border-bottom: 3px solid #527bbd; "><colgroup><col class="col_1" /><col class="col_2" /></colgroup><thead><tr><th style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top">Name </th><th style="border-bottom: 1px solid #527bbd; " align="left" valign="top"> Value</th></tr></thead><tbody><tr><td style="border-right: 1px solid #527bbd; " align="left" valign="top"><p>options</p></td><td style="" align="left" valign="top"><p>A comma separated list of one or more of the following items:
<span class="emphasis"><em>autoplay</em></span>, <span class="emphasis"><em>loop</em></span> which correspond to the same-named HTML 5 <span class="emphasis"><em>audio</em></span>
element boolean attributes.  By default the player <span class="emphasis"><em>controls</em></span> are
enabled, include the <span class="emphasis"><em>nocontrols</em></span> option value to hide them.</p></td></tr></tbody></table></div></div><br class="table-break" /><div class="table"><a id="idm2669"></a><p class="title"><strong>Table 22.2. Video macro attributes</strong></p><div class="table-contents"><table class="table" summary="Video macro attributes" cellpadding="4px" style="border-collapse: collapse;border-top: 3px solid #527bbd; border-bottom: 3px solid #527bbd; "><colgroup><col class="col_1" /><col class="col_2" /></colgroup><thead><tr><th style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top">Name   </th><th style="border-bottom: 1px solid #527bbd; " align="left" valign="top"> Value</th></tr></thead><tbody><tr><td style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top"><p>height</p></td><td style="border-bottom: 1px solid #527bbd; " align="left" valign="top"><p>The height of the player in pixels.</p></td></tr><tr><td style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top"><p>width</p></td><td style="border-bottom: 1px solid #527bbd; " align="left" valign="top"><p>The width of the player in pixels.</p></td></tr><tr><td style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top"><p>poster</p></td><td style="border-bottom: 1px solid #527bbd; " align="left" valign="top"><p>The URL or file name of an image representing the video.</p></td></tr><tr><td style="border-right: 1px solid #527bbd; " align="left" valign="top"><p>options</p></td><td style="" align="left" valign="top"><p>A comma separated list of one or more of the following items:
<span class="emphasis"><em>autoplay</em></span>, <span class="emphasis"><em>loop</em></span> and <span class="emphasis"><em>nocontrols</em></span>. The <span class="emphasis"><em>autoplay</em></span> and <span class="emphasis"><em>loop</em></span> options
correspond to the same-named HTML 5 <span class="emphasis"><em>video</em></span> element boolean
attributes.  By default the player <span class="emphasis"><em>controls</em></span> are enabled, include the
<span class="emphasis"><em>nocontrols</em></span> option value to hide them.</p></td></tr></tbody></table></div></div><br class="table-break" /><p>Examples:</p><pre class="screen">audio::images/example.ogg[]

video::gizmo.ogv[width=200,options="nocontrols,autoplay"]

.Example video
video::gizmo.ogv[]

video::http://www.808.dk/pics/video/gizmo.ogv[]</pre><p>If your needs are more complex put raw HTML 5 in a markup block, for
example (from <a class="ulink" href="http://www.808.dk/?code-html-5-video" target="_top">http://www.808.dk/?code-html-5-video</a>):</p><pre class="screen">++++
&lt;video poster="pics/video/gizmo.jpg" id="video" style="cursor: pointer;" &gt;
  &lt;source src="pics/video/gizmo.mp4" /&gt;
  &lt;source src="pics/video/gizmo.webm" type="video/webm" /&gt;
  &lt;source src="pics/video/gizmo.ogv" type="video/ogg" /&gt;
  Video not playing? &lt;a href="pics/video/gizmo.mp4"&gt;Download file&lt;/a&gt; instead.
&lt;/video&gt;

&lt;script type="text/javascript"&gt;
  var video = document.getElementById('video');
  video.addEventListener('click',function(){
    video.play();
  },false);
&lt;/script&gt;
++++</pre></div><div class="navfooter"><hr /><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch21.html"><img src="images/icons/prev.png" alt="Prev" /></a> </td><td width="20%" align="center"> </td><td width="40%" align="right"> <a accesskey="n" href="ch23.html"><img src="images/icons/next.png" alt="Next" /></a></td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html"><img src="images/icons/home.png" alt="Home" /></a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>