Skip to content

Commit

Permalink
Added multimedia player audio examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@LaurentGoderre
LaurentGoderre committed Sep 5, 2012
1 parent 6654e3b commit ad03f60
Show file tree
Hide file tree
Showing 6 changed files with 368 additions and 11 deletions.
6 changes: 4 additions & 2 deletions demos/index-eng.html
View file
Expand Up @@ -240,8 +240,10 @@ <h1 id="wb-cont">Working examples</h1>
<div class="span-4">
<section><h2 id="multimedia">Multimedia player</h2>
<ul>
<li><a href="multimedia/multimedia-eng.html"><span class="wb-invisible">Multimedia player - </span>English examples</a></li>
<li><a href="multimedia/multimedia-fra.html"><span class="wb-invisible">Multimedia player - </span>French examples</a></li>
<li><a href="multimedia/multimedia-eng.html"><span class="wb-invisible">Multimedia player - </span>English video examples</a></li>
<li><a href="multimedia/multimedia-fra.html"><span class="wb-invisible">Multimedia player - </span>French video examples</a></li>
<li><a href="multimedia/multimedia-audio-eng.html"><span class="wb-invisible">Multimedia player - </span>English audio examples</a></li>
<li><a href="multimedia/multimedia-audio-fra.html"><span class="wb-invisible">Multimedia player - </span>French audio examples</a></li>
</ul>
</section>

Expand Down
2 changes: 2 additions & 0 deletions demos/index-fra.html
View file
Expand Up @@ -203,6 +203,8 @@ <h1 id="wb-cont">Exemples pratiques</h1>
<ul>
<li><a href="multimedia/multimedia-eng.html"><span class="wb-invisible">Lecteur multimédia - </span>Exemples en anglais</a></li>
<li><a href="multimedia/multimedia-fra.html"><span class="wb-invisible">Lecteur multimédia - </span>Exemples en français</a></li>
<li><a href="multimedia/multimedia-audio-eng.html"><span class="wb-invisible">Lecteur multimédia - </span>Exemples audio en anglais</a></li>
<li><a href="multimedia/multimedia-audio-fra.html"><span class="wb-invisible">Lecteur multimédia - </span>Exemples audio en français</a></li>
</ul>
</section>

Expand Down
180 changes: 180 additions & 0 deletions demos/multimedia/multimedia-audio-eng.html
View file
@@ -0,0 +1,180 @@
<!DOCTYPE html>
<!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
www.tbs.gc.ca/ws-nw/wet-boew/terms / www.sct.gc.ca/ws-nw/wet-boew/conditions -->
<title>Multimedia player Audio - Working examples - Web Experience Toolkit (WET)</title>

<link rel="shortcut icon" href="../../build/theme-gcwu-fegc/images/favicon.ico" />
<meta name="description" content="English description / Description en anglais" />
<meta name="dcterms.creator" content="English name of the content author / Nom en anglais de l'auteur du contenu" />
<meta name="dcterms.title" content="English title / Titre en anglais" />
<meta name="dcterms.issued" title="W3CDTF" content="Date published (YYYY-MM-DD) / Date de publication (AAAA-MM-JJ)" />
<meta name="dcterms.modified" title="W3CDTF" content="Date modified (YYYY-MM-DD) / Date de modification (AAAA-MM-JJ)" />
<meta name="dcterms.subject" title="scheme" content="English subject terms / Termes de sujet en anglais" />
<meta name="dcterms.language" title="ISO639-2" content="eng" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="../../build/js/jquery.min.js"></script>
<!--[if lte IE 8]>
<script src="../../build/js/polyfills/html5shiv-min.js"></script>
<link rel="stylesheet" href="../../build/grids/css/util-ie-min.css" />
<link rel="stylesheet" href="../../build/js/css/pe-ap-ie-min.css" />
<link rel="stylesheet" href="../../build/theme-gcwu-fegc/css/theme-ie-min.css" />
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="../../build/grids/css/util-min.css" />
<link rel="stylesheet" href="../../build/js/css/pe-ap-min.css" />
<link rel="stylesheet" href="../../build/theme-gcwu-fegc/css/theme-min.css" />
<!--<![endif]-->

<!-- CustomScriptsCSSStart -->
<!-- CustomScriptsCSSEnd -->
</head>

<body><div id="wb-body">
<div id="wb-skip">
<ul id="wb-tphp">
<li id="wb-skip1"><a href="#wb-cont">Skip to main content</a></li>
<li id="wb-skip2"><a href="#wb-nav">Skip to footer</a></li>
</ul>
</div>

<div id="wb-head"><div id="wb-head-in"><header>
<!-- HeaderStart -->
<nav role="navigation"><div id="gcwu-gcnb"><h2>Government of Canada navigation bar</h2><div id="gcwu-gcnb-in"><div id="gcwu-gcnb-fip">
<div id="gcwu-sig"><div id="gcwu-sig-in"><div id="gcwu-sig-eng" title="Government of Canada"><img src="../../build/theme-gcwu-fegc/images/sig-eng.gif" width="214" height="20" alt="Government of Canada" /></div></div></div>
<ul>
<li id="gcwu-gcnb1"><a rel="external" href="http://www.canada.gc.ca/menu-eng.html">Canada.gc.ca</a></li>
<li id="gcwu-gcnb2"><a rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml">Services</a></li>
<li id="gcwu-gcnb3"><a rel="external" href="http://www.canada.gc.ca/aboutgov-ausujetgouv/depts/menu-eng.html">Departments</a></li>
<li id="gcwu-gcnb-lang"><a href="multimedia-audio-fra.html" lang="fr">Français</a></li>
</ul>
</div></div></div></nav>

<div id="gcwu-bnr" role="banner"><div id="gcwu-bnr-in">
<div id="gcwu-wmms"><div id="gcwu-wmms-in"><div id="gcwu-wmms-fip" title="Symbol of the Government of Canada"><img src="../../build/theme-gcwu-fegc/images/wmms.gif" width="126" height="30" alt="Symbol of the Government of Canada" /></div></div></div>
<div id="gcwu-title"><p id="gcwu-title-in"><a href="../../docs/index-eng.html">Web Experience Toolkit&#160;(WET)</a></p></div>

<section role="search"><div id="gcwu-srchbx"><h2>Search</h2>
<form action="#" method="post"><div id="gcwu-srchbx-in">
<label for="gcwu-srch">Search website</label><input id="gcwu-srch" name="gcwu-srch" type="search" value="" size="27" maxlength="150" />
<input id="gcwu-srch-submit" name="gcwu-srch-submit" type="submit" value="Search" data-icon="search" />
</div></form>
</div></section>
</div></div>

<nav role="navigation">
<div id="gcwu-psnb"><h2><span>Site</span> menu</h2><div id="gcwu-psnb-in"><div class="wet-boew-menubar mb-mega"><div>
<ul class="mb-menu" data-ajax-replace="../includes/menu-eng.inc">
<li><div><a href="http://wet-boew.github.com/wet-boew/docs/index-eng.html">WET project</a></div></li>
<li><div><a href="section2/index-eng.html">Section 2</a></div></li>
<li><div><a href="#">Section 3</a></div></li>
<li><div><a href="#">Section 4</a></div></li>
<li><div><a href="#">Section 5</a></div></li>
<li><div><a href="#">Section 6</a></div></li>
<li><div><a href="#">Section 7</a></div></li>
</ul>
</div></div></div></div>

<div id="gcwu-bc"><h2>Breadcrumb trail</h2><div id="gcwu-bc-in">
<ol>
<li><a href="../../docs/index-eng.html">Home</a></li>
<li><a href="../index-eng.html">Working examples</a></li>
<li>Multimedia player Audio</li>
</ol>
</div></div>
</nav>
<!-- HeaderEnd -->
</header></div></div>

<div id="wb-core"><div id="wb-core-in" class="equalize">
<div id="wb-main" role="main"><div id="wb-main-in">
<!-- MainContentStart -->
<h1 id="wb-cont">Multimedia player Audio - Web Experience Toolkit (WET)</h1>
<section>

<p>The new version of the multimedia player leverages native HTML5 audio tag and relies on Flash as a fallback mechanism when the HTML5 audio tag is not implemented. The MP3 format (H264 codec) is the minimum requirement for the player because the Flash fallback relies on it and MP3 is a widely supported format on many mobile devices. An optional but highly recommended format, OGG Vorbis, should be added as well to allow some browsers such as Firefox that do not include native support for MP3 to leverage the HTML5 native performance gains. The multimedia player's timeline relies on the HTML5 progress element and uses a polyfill when the element is not supported.</p>

<div class="wet-boew-multimedia span-4">
<h2>Audio Example (Ride of the Valkyries)</h2>
<audio title="Audio Example (Ride of the Valkyries)">
<source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3" />
<source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.ogg" type="audio/ogg" />
</audio>
</div>
</section>
<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date modified:</dt><dd><span><time>2012-07-27</time></span></dd>
</dl>
<div class="clear"></div>
<!-- MainContentEnd -->
</div></div>
</div></div>

<div id="wb-foot"><div id="wb-foot-in"><footer><h2 id="wb-nav">Footer</h2>
<!-- FooterStart -->
<nav role="navigation"><div id="gcwu-sft"><h3>Site footer</h3><div id="gcwu-sft-in">
<div id="gcwu-tctr">
<ul>
<li class="gcwu-tc"><a href="#" rel="license">Terms and conditions</a></li>
<li class="gcwu-tr"><a href="#">Transparency</a></li>
</ul>
</div>
<div class="clear"></div>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">About us</a></h4>
<ul>
<li><a href="#">Our Mandate</a></li>
<li><a href="#">The Minister</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">News</a></h4>
<ul>
<li><a href="#">News releases</a></li>
<li><a href="#">Media advisories</a></li>
<li><a href="#">Multimedia</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Contact us</a></h4>
<address>
<ul>
<li><a href="#">Phone numbers</a></li>
<li><a href="#">Office locations</a></li>
</ul>
</address>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Stay connected</a></h4>
<ul>
<li><a rel="external" href="#">YouTube</a></li>
<li><a rel="external" href="#">Twitter</a></li>
<li><a href="#">Feeds</a></li>
</ul>
</div></section>
</div></div></nav>

<nav role="navigation"><div id="gcwu-gcft"><h3>Government of Canada footer</h3><div id="gcwu-gcft-in"><div id="gcwu-gcft-fip">
<ul>
<li><a rel="external" href="http://healthycanadians.gc.ca/index-eng.php"><span>Health</span><br />healthycanadians.gc.ca</a></li>
<li><a rel="external" href="http://www.voyage.gc.ca/index-eng.asp"><span>Travel</span><br />travel.gc.ca</a></li>
<li><a rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml"><span>Service Canada</span><br />servicecanada.gc.ca</a></li>
<li><a rel="external" href="http://www.jobbank.gc.ca/intro-eng.aspx"><span>Jobs</span><br />jobbank.gc.ca</a></li>
<li><a rel="external" href="http://actionplan.gc.ca/eng/index.asp"><span>Economy</span><br />actionplan.gc.ca</a></li>
<li id="gcwu-gcft-ca"><div><a rel="external" href="http://www.canada.gc.ca/menu-eng.html">Canada.gc.ca</a></div></li>
</ul>
</div></div></div></nav>
<!-- FooterEnd -->
</footer>
</div></div></div>

<!-- ScriptsStart -->
<script src="../../build/theme-gcwu-fegc/js/theme-min.js"></script>
<script src="../../build/js/settings.js"></script>
<script src="../../build/js/pe-ap-min.js"></script>
<!-- ScriptsEnd -->
</body>
</html>
178 changes: 178 additions & 0 deletions demos/multimedia/multimedia-audio-fra.html
View file
@@ -0,0 +1,178 @@
<!DOCTYPE html>
<!--[if IE 7]><html lang="fr" class="no-js ie7"><![endif]-->
<!--[if IE 8]><html lang="fr" class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="fr" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
www.tbs.gc.ca/ws-nw/wet-boew/terms / www.sct.gc.ca/ws-nw/wet-boew/conditions -->
<title>Lecteur Multimedia Audio - Exemples pratiques - Boîte à outils de l'expérience Web (BOEW)</title>

<link rel="shortcut icon" href="../../build/theme-gcwu-fegc/images/favicon.ico" />
<meta name="description" content="French description / Description en français" />
<meta name="dcterms.creator" content="French name of the content author / Nom en français de l'auteur du contenu" />
<meta name="dcterms.title" content="French title / Titre en français" />
<meta name="dcterms.issued" title="W3CDTF" content="Date published (YYYY-MM-DD) / Date de publication (AAAA-MM-JJ)" />
<meta name="dcterms.modified" title="W3CDTF" content="Date modified (YYYY-MM-DD) / Date de modification (AAAA-MM-JJ)" />
<meta name="dcterms.subject" title="scheme" content="French subject terms / Termes de sujet en français" />
<meta name="dcterms.language" title="ISO639-2" content="fra" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="../../build/js/jquery.min.js"></script>
<!--[if lte IE 8]>
<script src="../../build/js/polyfills/html5shiv-min.js"></script>
<link rel="stylesheet" href="../../build/grids/css/util-ie-min.css" />
<link rel="stylesheet" href="../../build/js/css/pe-ap-ie-min.css" />
<link rel="stylesheet" href="../../build/theme-gcwu-fegc/css/theme-ie-min.css" />
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="../../build/grids/css/util-min.css" />
<link rel="stylesheet" href="../../build/js/css/pe-ap-min.css" />
<link rel="stylesheet" href="../../build/theme-gcwu-fegc/css/theme-min.css" />
<!--<![endif]-->

<!-- CustomScriptsCSSStart -->
<!-- CustomScriptsCSSEnd -->
</head>

<body><div id="wb-body">
<div id="wb-skip">
<ul id="wb-tphp">
<li id="wb-skip1"><a href="#wb-cont">Passer au contenu principal</a></li>
<li id="wb-skip2"><a href="#wb-nav">Passer au pied de page</a></li>
</ul>
</div>

<div id="wb-head"><div id="wb-head-in"><header>
<!-- HeaderStart -->
<nav role="navigation"><div id="gcwu-gcnb"><h2>Barre de navigation de la gouvernement de Canada</h2><div id="gcwu-gcnb-in"><div id="gcwu-gcnb-fip">
<div id="gcwu-sig"><div id="gcwu-sig-in"><div id="gcwu-sig-fra" title="Gouvernement du Canada"><img src="../../build/theme-gcwu-fegc/images/sig-fra.gif" width="214" height="20" alt="Gouvernement du Canada" /></div></div></div>
<ul>
<li id="gcwu-gcnb1"><a rel="external" href="http://www.canada.gc.ca/menu-fra.html">Canada.gc.ca</a></li>
<li id="gcwu-gcnb2"><a rel="external" href="http://www.servicecanada.gc.ca/fra/accueil.shtml">Services</a></li>
<li id="gcwu-gcnb3"><a rel="external" href="http://www.canada.gc.ca/aboutgov-ausujetgouv/depts/menu-fra.html">Ministères</a></li>
<li id="gcwu-gcnb-lang"><a href="multimedia-eng.html" lang="en">English</a></li>
</ul>
</div></div></div></nav>

<div id="gcwu-bnr" role="banner"><div id="gcwu-bnr-in">
<div id="gcwu-wmms"><div id="gcwu-wmms-in"><div id="gcwu-wmms-fip" title="Symbole du gouvernement du Canada"><img src="../build/theme-gcwu-fegc/images/wmms.gif" width="126" height="30" alt="Symbole du gouvernement du Canada" /></div></div></div>
<div id="gcwu-title"><p id="gcwu-title-in"><a href="../../docs/index-fra.html">Boîte à outils de l'expérience Web&#160;(BOEW)</a></p></div>

<section role="search"><div id="gcwu-srchbx"><h2>Recherche</h2>
<form action="#" method="post"><div id="gcwu-srchbx-in">
<label for="gcwu-srch">Recherchez le site Web</label><input id="gcwu-srch" name="gcwu-srch" type="search" value="" size="27" maxlength="150" />
<input id="gcwu-srch-submit" name="gcwu-srch-submit" type="submit" value="Recherche" data-icon="search" />
</div></form>
</div></section>
</div></div>

<nav role="navigation">
<div id="gcwu-psnb"><h2><span>Menu</span> du site</h2><div id="gcwu-psnb-in"><div class="wet-boew-menubar mb-mega"><div>
<ul class="mb-menu" data-ajax-replace="../includes/menu-fra.inc">
<li><div><a href="http://wet-boew.github.com/wet-boew/docs/index-fra.html">Projet de la BOEW</a></div></li>
<li><div><a href="section2/index-fra.html">Section 2</a></div></li>
<li><div><a href="#">Section 3</a></div></li>
<li><div><a href="#">Section 4</a></div></li>
<li><div><a href="#">Section 5</a></div></li>
<li><div><a href="#">Section 6</a></div></li>
<li><div><a href="#">Section 7</a></div></li>
</ul>
</div></div></div></div>

<div id="gcwu-bc"><h2>Fil d'Ariane</h2><div id="gcwu-bc-in">
<ol>
<li><a href="../../docs/index-fra.html">Accueil</a></li>
<li><a href="../index-fra.html">Exemples pratiques</a></li>
<li>Lecteur Multimedia Audio</li>
</ol></div></div>
</nav>
<!-- HeaderEnd -->
</header></div></div>

<div id="wb-core"><div id="wb-core-in" class="equalize">
<div id="wb-main" role="main"><div id="wb-main-in">
<!-- MainContentStart -->
<h1 id="wb-cont">Lecteur Multimedia Audio - Boîte à outils de l'expérience Web (BOEW)</h1>

<section>
<div class="wet-boew-multimedia span-4">
<h2>Exemple Audio (Chevauchée des Walkyries)</h2>
<audio title="Exemple Audio (Chevauchée des Walkyries)">
<source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3" />
<source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.ogg" type="audio/ogg" />
</audio>
</div>
</section>

<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date de modification&#160;:</dt><dd><span><time>2012-09-17</time></span></dd>
</dl>
<div class="clear"></div>
<!-- MainContentEnd -->
</div></div>
</div></div>

<div id="wb-foot"><div id="wb-foot-in"><footer><h2 id="wb-nav">Pied de page</h2>
<!-- FooterStart -->
<nav role="navigation"><div id="gcwu-sft"><h3>Pied de page du site</h3><div id="gcwu-sft-in">
<div id="gcwu-tctr">
<ul>
<li class="gcwu-tc"><a href="#" rel="license">Avis</a></li>
<li class="gcwu-tr"><a href="#">Transparence</a></li>
</ul>
</div>
<div class="clear"></div>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">À propos de nous</a></h4>
<ul>
<li><a href="#">Notre mandat</a></li>
<li><a href="#">Le ministre</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Nouvelles</a></h4>
<ul>
<li><a href="#">Communiqués</a></li>
<li><a href="#">Avix aux médias</a></li>
<li><a href="#">Multimédia</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Contactez-nous</a></h4>
<address>
<ul>
<li><a href="#">Numéros de téléphone</a></li>
<li><a href="#">Nos bureaux</a></li>
</ul>
</address>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Restez branchés</a></h4>
<ul>
<li><a rel="external" href="#">YouTube</a></li>
<li><a rel="external" href="#">Twitter</a></li>
<li><a href="#">Flux</a></li>
</ul>
</div></section>
</div></div></nav>

<nav role="navigation"><div id="gcwu-gcft"><h3>Pied de page du gouvernement du Canada</h3><div id="gcwu-gcft-in"><div id="gcwu-gcft-fip">
<ul>
<li><a rel="external" href="http://canadiensensante.gc.ca/index-fra.php"><span>Santé</span><br />canadiensensante.gc.ca</a></li>
<li><a rel="external" href="http://www.voyage.gc.ca/index-fra.asp"><span>Voyage</span><br />voyage.gc.ca</a></li>
<li><a rel="external" href="http://www.servicecanada.gc.ca/fra/accueil.shtml"><span>Service Canada</span><br />servicecanada.gc.ca</a></li>
<li><a rel="external" href="http://www.guichetemplois.gc.ca/Intro-fra.aspx"><span>Emplois</span><br />guichetemplois.gc.ca</a></li>
<li><a rel="external" href="http://plandaction.gc.ca/fra/index.asp"><span>Économie</span><br />plandaction.gc.ca</a></li>
<li id="gcwu-gcft-ca"><div><a rel="external" href="http://www.canada.gc.ca/menu-fra.html">Canada.gc.ca</a></div></li>
</ul>
</div></div></div></nav>
<!-- FooterEnd -->
</footer>
</div></div></div>

<!-- ScriptsStart -->
<script src="../../build/theme-gcwu-fegc/js/theme-min.js"></script>
<script src="../../build/js/settings.js"></script>
<script src="../../build/js/pe-ap-min.js"></script>
<!-- ScriptsEnd -->
</body>
</html>

0 comments on commit ad03f60

Please sign in to comment.