<!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/xhtml;charset=UTF-8"/>
<title>Wt: Wt::WVideo Class Reference</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<script type="text/javascript">
$(document).ready(function() { searchBox.OnSelectItem(0); });
</script>
</head>
<body>
<div id="top"><!-- do not remove this div! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 56px;">
<td style="padding-left: 0.5em;">
<div id="projectname">Wt
 <span id="projectnumber">3.2.3</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Generated by Doxygen 1.7.5.1 -->
<script type="text/javascript">
var searchBox = new SearchBox("searchBox", "search",false,'Search');
</script>
<div id="navrow1" class="tabs">
<ul class="tablist">
<li><a href="index.html"><span>Main Page</span></a></li>
<li><a href="pages.html"><span>Related Pages</span></a></li>
<li><a href="modules.html"><span>Modules</span></a></li>
<li><a href="namespaces.html"><span>Namespaces</span></a></li>
<li class="current"><a href="annotated.html"><span>Classes</span></a></li>
<li><a href="files.html"><span>Files</span></a></li>
<li>
<div id="MSearchBox" class="MSearchBoxInactive">
<span class="left">
<img id="MSearchSelect" src="search/mag_sel.png"
onmouseover="return searchBox.OnSearchSelectShow()"
onmouseout="return searchBox.OnSearchSelectHide()"
alt=""/>
<input type="text" id="MSearchField" value="Search" accesskey="S"
onfocus="searchBox.OnSearchFieldFocus(true)"
onblur="searchBox.OnSearchFieldFocus(false)"
onkeyup="searchBox.OnSearchFieldChange(event)"/>
</span><span class="right">
<a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.png" alt=""/></a>
</span>
</div>
</li>
</ul>
</div>
<div id="navrow2" class="tabs2">
<ul class="tablist">
<li><a href="annotated.html"><span>Class List</span></a></li>
<li><a href="inherits.html"><span>Class Hierarchy</span></a></li>
<li><a href="functions.html"><span>Class Members</span></a></li>
</ul>
</div>
<div id="nav-path" class="navpath">
<ul>
<li class="navelem"><a class="el" href="namespaceWt.html">Wt</a> </li>
<li class="navelem"><a class="el" href="classWt_1_1WVideo.html">WVideo</a> </li>
</ul>
</div>
</div>
<div class="header">
<div class="summary">
<a href="#pub-methods">Public Member Functions</a> </div>
<div class="headertitle">
<div class="title">Wt::WVideo Class Reference</div> </div>
</div>
<div class="contents">
<!-- doxytag: class="Wt::WVideo" --><!-- doxytag: inherits="Wt::WAbstractMedia" -->
<p>A video-playing widget.
<a href="classWt_1_1WVideo.html#details">More...</a></p>
<p><code>#include <Wt/WVideo></code></p>
<div class="dynheader">
Inheritance diagram for Wt::WVideo:</div>
<div class="dyncontent">
<div class="center"><img src="classWt_1_1WVideo__inherit__graph.png" border="0" usemap="#Wt_1_1WVideo_inherit__map" alt="Inheritance graph"/></div>
<map name="Wt_1_1WVideo_inherit__map" id="Wt_1_1WVideo_inherit__map">
<area shape="rect" href="classWt_1_1WAbstractMedia.html" title="Abstract baseclass for native media elements." alt="" coords="5,304,149,331"/><area shape="rect" href="classWt_1_1WInteractWidget.html" title="An abstract widget that can receive user-interface interaction." alt="" coords="5,229,149,256"/><area shape="rect" href="classWt_1_1WWebWidget.html" title="A base class for widgets with an HTML counterpart." alt="" coords="13,155,141,181"/><area shape="rect" href="classWt_1_1WWidget.html" title="The abstract base class for a user-interface component." alt="" coords="28,80,127,107"/><area shape="rect" href="classWt_1_1WObject.html" title="A base class for objects that participate in the signal/slot system." alt="" coords="29,5,125,32"/></map>
<center><span class="legend">[<a href="graph_legend.html">legend</a>]</span></center></div>
<p><a href="classWt_1_1WVideo-members.html">List of all members.</a></p>
<table class="memberdecls">
<tr><td colspan="2"><h2><a name="pub-methods"></a>
Public Member Functions</h2></td></tr>
<tr><td class="memItemLeft" align="right" valign="top"> </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WVideo.html#ac960695b099cebd4388625d013fdfdb4">WVideo</a> (<a class="el" href="classWt_1_1WContainerWidget.html">WContainerWidget</a> *parent=0)</td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Creates a video widget. <a href="#ac960695b099cebd4388625d013fdfdb4"></a><br/></td></tr>
<tr><td class="memItemLeft" align="right" valign="top">void </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WVideo.html#afdf8f7e6ad4a18ba8e27e41d034846e8">setPoster</a> (const std::string &url)</td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Set the poster image. <a href="#afdf8f7e6ad4a18ba8e27e41d034846e8"></a><br/></td></tr>
<tr><td class="memItemLeft" align="right" valign="top">std::string </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WVideo.html#aa61c6f4cc710bcff72008e2bcbd040c8">jsVideoRef</a> () const </td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Returns the JavaScript reference to the video object, or null. <a href="#aa61c6f4cc710bcff72008e2bcbd040c8"></a><br/></td></tr>
<tr><td class="memItemLeft" align="right" valign="top">virtual void </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WVideo.html#ac1d9ae4c6b29d10a5bcba1b17c2a2d0b">resize</a> (const <a class="el" href="classWt_1_1WLength.html">WLength</a> &width, const <a class="el" href="classWt_1_1WLength.html">WLength</a> &height)</td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Resizes the widget. <a href="#ac1d9ae4c6b29d10a5bcba1b17c2a2d0b"></a><br/></td></tr>
</table>
<hr/><a name="details" id="details"></a><h2>Detailed Description</h2>
<div class="textblock"><p>A video-playing widget. </p>
<p>This is a low-level widget, mapping directly onto a <code><video></code> element available in HTML5 compliant browsers.</p>
<p>In almost every situation you should use the <a class="el" href="classWt_1_1WMediaPlayer.html" title="A media player.">WMediaPlayer</a> widget instead, which has fallback and flexible user-interface options.</p>
<p>Usage of the video element consists of adding one or more video sources and setting some options. Since not every browser supports HTML5 video, the class provides a mechanism to display alternative content in browsers that cannot play the video.</p>
<p>Usage example: </p>
<div class="fragment"><pre class="fragment"> <a class="code" href="classWt_1_1WVideo.html#ac960695b099cebd4388625d013fdfdb4" title="Creates a video widget.">WVideo</a> *v = <span class="keyword">new</span> <a class="code" href="classWt_1_1WVideo.html#ac960695b099cebd4388625d013fdfdb4" title="Creates a video widget.">WVideo</a>(parent);
v->setOptions(<a class="code" href="classWt_1_1WAbstractMedia.html#a5a25922d875102bce7f295b88986a102aaa22c5028f0561a520e5362ca346840b" title="Start playing as soon as the video is loaded.">WVideo::Autoplay</a> | <a class="code" href="classWt_1_1WAbstractMedia.html#a5a25922d875102bce7f295b88986a102a08c3ddfc98b66a69be399198bf0ac16b" title="Show video controls in the browser.">WVideo::Controls</a>);
<span class="comment">// Addsources may be called multiple times for different formats:</span>
<span class="comment">// Firefox only plays ogg</span>
v->addSource(<span class="stringliteral">"wt.ogv"</span>);
<span class="comment">// many others play mp4</span>
v->addSource(<span class="stringliteral">"wt.mp4"</span>, <span class="stringliteral">"video/mp4"</span>);
<span class="comment">// Image to be displayed before playback starts</span>
v->setPoster(<span class="stringliteral">"wt.jpg"</span>);
<span class="comment">// You may display a simple text to explain that you need html5 support...</span>
<span class="comment">// v->setAlternativeContent(new WText("You have no HTML5 Video!"));</span>
<span class="comment">// ... or provide an alternative player, e.g. Flash-based</span>
WFlashObject *f = <span class="keyword">new</span> WFlashObject(<span class="stringliteral">"player.swf"</span>, root());
f->setFlashVariable(<span class="stringliteral">"startimage"</span>, <span class="stringliteral">"wt.jpg"</span>);
f->setFlashVariable(<span class="stringliteral">"flv"</span>, <span class="stringliteral">"wt.mp4"</span>);
f->resize(640, 384);
v->setAlternativeContent(f);
</pre></div><p>There are two reasons why the a browser may use the alternative content: either because the browser does not support the HTML5 video tag (alternative content is displayed even when JavaScript is not available), or because none of the specified sources contain a video format that is understood by the browser (requires JavaScript to display the alternative content).</p>
<p>The <a class="el" href="classWt_1_1WAbstractMedia.html#ae0bdedcd0136a29c05218ecab25dfa82" title="Add a media source.">addSource()</a> and <a class="el" href="classWt_1_1WAbstractMedia.html#a16e3c4a51ace8821725e009bfcf46d40" title="Content to be shown when media cannot be played.">setAlternativeContent()</a> may not be called after the widget is rendered.</p>
<dl class="see"><dt><b>See also:</b></dt><dd><a class="el" href="classWt_1_1WMediaPlayer.html" title="A media player.">WMediaPlayer</a></dd></dl>
<dl class="note"><dt><b>Note:</b></dt><dd>Before Wt 3.1.11, this was called WHTML5Video, which still exists as a (deprecated) typedef. </dd></dl>
</div><hr/><h2>Constructor & Destructor Documentation</h2>
<a class="anchor" id="ac960695b099cebd4388625d013fdfdb4"></a><!-- doxytag: member="Wt::WVideo::WVideo" ref="ac960695b099cebd4388625d013fdfdb4" args="(WContainerWidget *parent=0)" -->
<div class="memitem">
<div class="memproto">
<table class="memname">
<tr>
<td class="memname">WVideo::WVideo </td>
<td>(</td>
<td class="paramtype"><a class="el" href="classWt_1_1WContainerWidget.html">WContainerWidget</a> * </td>
<td class="paramname"><em>parent</em> = <code>0</code></td><td>)</td>
<td></td>
</tr>
</table>
</div>
<div class="memdoc">
<p>Creates a video widget. </p>
<p>The constructor sets the 'controls' option, which causes the browser to display a bar with play/pauze/volume/... controls.</p>
<p>A freshly constructed video widget has no poster image, no media sources, has preload mode set to PreloadAuto, and only the Controls flag is set. </p>
</div>
</div>
<hr/><h2>Member Function Documentation</h2>
<a class="anchor" id="aa61c6f4cc710bcff72008e2bcbd040c8"></a><!-- doxytag: member="Wt::WVideo::jsVideoRef" ref="aa61c6f4cc710bcff72008e2bcbd040c8" args="() const " -->
<div class="memitem">
<div class="memproto">
<table class="memname">
<tr>
<td class="memname">std::string WVideo::jsVideoRef </td>
<td>(</td>
<td class="paramname"></td><td>)</td>
<td> const</td>
</tr>
</table>
</div>
<div class="memdoc">
<p>Returns the JavaScript reference to the video object, or null. </p>
<p>It is possible, for compatibility reasons, that <a class="el" href="classWt_1_1WWidget.html#aa2b7078b3b43d53a85e5244b45d504f7" title="Returns a JavaScript expression to the corresponding DOM node.">jsRef()</a> is not the video element. <a class="el" href="classWt_1_1WVideo.html#aa61c6f4cc710bcff72008e2bcbd040c8" title="Returns the JavaScript reference to the video object, or null.">jsVideoRef()</a> is guaranteed to be an expression that evaluates to the video object. This expression may yield null, if the video object is not rendered at all (e.g. on older versions of Internet Explorer). </p>
</div>
</div>
<a class="anchor" id="ac1d9ae4c6b29d10a5bcba1b17c2a2d0b"></a><!-- doxytag: member="Wt::WVideo::resize" ref="ac1d9ae4c6b29d10a5bcba1b17c2a2d0b" args="(const WLength &width, const WLength &height)" -->
<div class="memitem">
<div class="memproto">
<table class="memname">
<tr>
<td class="memname">void WVideo::resize </td>
<td>(</td>
<td class="paramtype">const <a class="el" href="classWt_1_1WLength.html">WLength</a> & </td>
<td class="paramname"><em>width</em>, </td>
</tr>
<tr>
<td class="paramkey"></td>
<td></td>
<td class="paramtype">const <a class="el" href="classWt_1_1WLength.html">WLength</a> & </td>
<td class="paramname"><em>height</em> </td>
</tr>
<tr>
<td></td>
<td>)</td>
<td></td><td><code> [virtual]</code></td>
</tr>
</table>
</div>
<div class="memdoc">
<p>Resizes the widget. </p>
<p>Specifies a fixed size for this widget, setting CSS <code>width</code> and <code>height</code> properties. By default a widget has automatic width and height, which sets a size for the widget following CSS rules.</p>
<p>When the widget is not managed by a layout manager, the automatic (natural) size of a widget depends on whether they widget is a <em>block</em> or <em>inline</em> widget:</p>
<ul>
<li>a <em>block</em> widget takes by default the width of the parent, and the height that it needs based on its contents</li>
<li>an <em>inline</em> widget takes the width and height that it needs based on its contents (possibly wrapping over multiple lines). The width and height of an inline widget cannot be changed (by the letter of CSS, although most browsers will react to it in varying ways).</li>
</ul>
<p>When inserted in a layout manager, the size set will be used as a widget's preferred size, but the widget may be given a different size by the layout manager based on available space and stretch factors. The actual size given by a layout manager may be retrieved by making the widget "layout size aware", using <a class="el" href="classWt_1_1WWidget.html#a4f83592912a7f8fa4fd35dadde78ee74" title="Sets the widget to be aware of its size set by a layout manager.">setLayoutSizeAware()</a>. If you have defined a <code>"wtResize()"</code> JavaScript method for the widget, then this method will also be called.</p>
<p>The default width and height of a widget is <a class="el" href="classWt_1_1WLength.html#a0cf39ca4225776879d56ade60320c31a" title="An 'auto' length.">WLength::Auto</a>.</p>
<dl class="see"><dt><b>See also:</b></dt><dd><a class="el" href="classWt_1_1WWebWidget.html#a66ea6d827d488a855abc7a36d8d414ca" title="Returns the width.">width()</a>, <a class="el" href="classWt_1_1WWebWidget.html#a890a25fe2e8567525f44c0d2ecf0547b" title="Returns the height.">height()</a> </dd></dl>
<p>Reimplemented from <a class="el" href="classWt_1_1WWebWidget.html#a4762c1aa0b5788e54a52270674f21e23">Wt::WWebWidget</a>.</p>
</div>
</div>
<a class="anchor" id="afdf8f7e6ad4a18ba8e27e41d034846e8"></a><!-- doxytag: member="Wt::WVideo::setPoster" ref="afdf8f7e6ad4a18ba8e27e41d034846e8" args="(const std::string &url)" -->
<div class="memitem">
<div class="memproto">
<table class="memname">
<tr>
<td class="memname">void WVideo::setPoster </td>
<td>(</td>
<td class="paramtype">const std::string & </td>
<td class="paramname"><em>url</em></td><td>)</td>
<td></td>
</tr>
</table>
</div>
<div class="memdoc">
<p>Set the poster image. </p>
<p>On browsers that support it, the poster image is displayed before the video is playing. Some browsers display the first frame of the video stream once the video stream is loaded; it is therefore a good idea to include the poster image as first frame in the video feed too. </p>
</div>
</div>
</div>
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
onmouseover="return searchBox.OnSearchSelectShow()"
onmouseout="return searchBox.OnSearchSelectHide()"
onkeydown="return searchBox.OnSearchSelectKey(event)">
<a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(0)"><span class="SelectionMark"> </span>All</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(1)"><span class="SelectionMark"> </span>Classes</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(2)"><span class="SelectionMark"> </span>Namespaces</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(3)"><span class="SelectionMark"> </span>Files</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(4)"><span class="SelectionMark"> </span>Functions</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(5)"><span class="SelectionMark"> </span>Variables</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(6)"><span class="SelectionMark"> </span>Typedefs</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(7)"><span class="SelectionMark"> </span>Enumerations</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(8)"><span class="SelectionMark"> </span>Enumerator</a></div>
<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<iframe src="javascript:void(0)" frameborder="0"
name="MSearchResults" id="MSearchResults">
</iframe>
</div>
<hr size="1"><address style="text-align: right; margin: 3px"><small>
Generated on Thu Nov 1 2012 for <a href="http://www.webtoolkit.eu/wt">the
C++ Web Toolkit (Wt)</a> by <a
href="http://www.doxygen.org/index.html"><img src="doxygen.png"
alt="doxygen" border="0" style="vertical-align: middle; display:
inline-block; height: 2em"></a> 1.7.5.1</small></address>
</body>
</html>
