Skip to content

Commit

Permalink
Tabbed interface / Multimedia player: Added example of the multimedia…
Browse files Browse the repository at this point in the history 
… player embedded in a Tabbed interface carousel
  • Loading branch information
Paul Jackson authored and Paul Jackson committed Jun 9, 2014
1 parent afba496 commit f0ebc26
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 79 deletions.
8 changes: 4 additions & 4 deletions src/plugins/multimedia/multimedia-en.hbs
View file
Expand Up @@ -32,17 +32,17 @@
<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.webm" />
<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.mp4" />
<track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
</video>
<p><a href="http://www.servicecanada.gc.ca/eng/video/lj.shtml">Transcript</a></p>
</video>
<p><a href="http://www.servicecanada.gc.ca/eng/video/lj.shtml">Transcript</a></p>
</section>
<section class="wb-mltmd col-md-6">
<h3 class="wb-inv">MPEG4 (H264 + AAC) and WebM (VP8) source and HTML captions</h3>
<video poster="http://www.servicecanada.gc.ca/eng/video/images/dc-td-eng.jpg" title="Video Example">
<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-eng.webm" />
<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-eng.mp4" />
<track src="cpts-lg2-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
</video>
<p><a href="http://www.servicecanada.gc.ca/eng/video/td.shtml">Transcript</a></p>
</video>
<p><a href="http://www.servicecanada.gc.ca/eng/video/td.shtml">Transcript</a></p>
</section>
</div>
<div class="row">
Expand Down
8 changes: 4 additions & 4 deletions src/plugins/multimedia/multimedia-fr.hbs
View file
Expand Up @@ -32,17 +32,17 @@
<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.webm" />
<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.mp4" />
<track src="cpts-lg-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />
</video>
<p><a href="http://www.servicecanada.gc.ca/fra/video/te.shtml">Transcription</a></p>
</video>
<p><a href="http://www.servicecanada.gc.ca/fra/video/te.shtml">Transcription</a></p>
</section>
<section class="wb-mltmd col-md-6">
<h3 class="wb-inv">MPEG4 (H264 + AAC) et WebM (VP8) avec les sous-titres au HTML</h3>
<video poster="http://www.servicecanada.gc.ca/fra/video/images/dc-td-fra.jpg" title="Video Example">
<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-fra.webm" />
<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-fra.mp4" />
<track src="cpts-lg2-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />
</video>
<p><a href="http://www.servicecanada.gc.ca/fra/video/dc.shtml">Transcription</a></p>
</video>
<p><a href="http://www.servicecanada.gc.ca/fra/video/dc.shtml">Transcription</a></p>
</section>
</div>
<div class="row">
Expand Down
98 changes: 64 additions & 34 deletions src/plugins/tabs/tabs-carousel-en.hbs
View file
Expand Up @@ -7,21 +7,21 @@
"tag": "tabs, carousel",
"parentdir": "tabs",
"altLangPrefix": "tabs-carousel",
"dateModified": "2014-06-03"
"dateModified": "2014-06-09"
}
---

<section>
<h2>Carousel style 1 (<code>carousel-s1</code>)</h2>
<div class="wb-tabs carousel-s1">
<ul role="tablist">
<li class="active"><a href="#panel1">Image 1</a></li>
<li><a href="#panel2">Image 2</a></li>
<li><a href="#panel3">Image 3</a></li>
<li class="active"><a href="#panel1">Tab 1</a></li>
<li><a href="#panel2">Tab 2</a></li>
<li><a href="#panel3">Tab 3</a></li>
</ul>
<div role="tabpanel" id="panel1" class="in fade">
<figure>
<img src="img/protect-environment.jpg" alt="panel 1" />
<img src="img/protect-environment.jpg" alt="Panel 1" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">Renewal of the Aviation Document Booklet</a>&nbsp;<br />
Expand All @@ -32,7 +32,7 @@
</div>
<div role="tabpanel" id="panel2" class="out fade">
<figure>
<img src="img/banff.jpg" alt="panel 2" />
<img src="img/banff.jpg" alt="Panel 2" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/railsafety/publications-46.htm">Grade Crossing Improvement Program (GCIP)</a><br />
Expand All @@ -43,7 +43,7 @@
</div>
<div role="tabpanel" id="panel3" class="out fade">
<figure>
<img src="img/investinourfuture.jpg" alt="panel 3" />
<img src="img/investinourfuture.jpg" alt="Panel 3" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">Tanker Safety Expert Panel</a><br />
Expand All @@ -65,7 +65,7 @@
</ul>
<div role="tabpanel" id="panel4" class="in fade">
<figure>
<img src="img/protect-environment.jpg" alt="panel 1" />
<img src="img/protect-environment.jpg" alt="Panel 1" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">Renewal of the Aviation Document Booklet</a>&nbsp;<br />
Expand All @@ -76,7 +76,7 @@
</div>
<div role="tabpanel" id="panel5" class="out fade">
<figure>
<img src="img/banff.jpg" alt="panel 2" />
<img src="img/banff.jpg" alt="Panel 2" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/railsafety/publications-46.htm">Grade Crossing Improvement Program (GCIP)</a><br />
Expand All @@ -87,7 +87,7 @@
</div>
<div role="tabpanel" id="panel6" class="out fade">
<figure>
<img src="img/investinourfuture.jpg" alt="panel 3" />
<img src="img/investinourfuture.jpg" alt="Panel 3" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">Tanker Safety Expert Panel</a><br />
Expand All @@ -106,13 +106,13 @@
<h3>Carousel style 1 - col-sm-6 col-md-4</h3>
<div class="wb-tabs carousel-s1">
<ul role="tablist">
<li class="active"><a href="#panel7">Image 1</a></li>
<li><a href="#panel8">Image 2</a></li>
<li><a href="#panel9">Image 3</a></li>
<li class="active"><a href="#panel7">Tab 1</a></li>
<li><a href="#panel8">Tab 2</a></li>
<li><a href="#panel9">Tab 3</a></li>
</ul>
<div role="tabpanel" id="panel7" class="in fade">
<figure>
<img src="img/protect-environment.jpg" alt="panel 1" />
<img src="img/protect-environment.jpg" alt="Panel 1" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">Renewal of the Aviation Document Booklet</a>&nbsp;<br />
Expand All @@ -123,7 +123,7 @@
</div>
<div role="tabpanel" id="panel8" class="out fade">
<figure>
<img src="img/banff.jpg" alt="panel 2" />
<img src="img/banff.jpg" alt="Panel 2" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/railsafety/publications-46.htm">Grade Crossing Improvement Program (GCIP)</a><br />
Expand All @@ -134,7 +134,7 @@
</div>
<div role="tabpanel" id="panel9" class="out fade">
<figure>
<img src="img/investinourfuture.jpg" alt="panel 3" />
<img src="img/investinourfuture.jpg" alt="Panel 3" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">Tanker Safety Expert Panel</a><br />
Expand All @@ -149,13 +149,13 @@
<h3>Carousel style 2 - col-sm-6 col-md-8</h3>
<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel10"><img src="img/protect-environment.jpg" alt="tab 1" /></a></li>
<li><a href="#panel11"><img src="img/banff.jpg" alt="tab 2" /></a></li>
<li><a href="#panel12"><img src="img/investinourfuture.jpg" alt="tab 3" /></a></li>
<li class="active"><a href="#panel10">Tab 1</a></li>
<li><a href="#panel11">Tab 2</a></li>
<li><a href="#panel12">Ŧab 3</a></li>
</ul>
<div role="tabpanel" id="panel10" class="in fade">
<figure>
<img src="img/protect-environment.jpg" alt="panel 1" />
<img src="img/protect-environment.jpg" alt="Panel 1" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">Renewal of the Aviation Document Booklet</a>&nbsp;<br />
Expand All @@ -166,7 +166,7 @@
</div>
<div role="tabpanel" id="panel11" class="out fade">
<figure>
<img src="img/banff.jpg" alt="panel 2" />
<img src="img/banff.jpg" alt="Panel 2" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/railsafety/publications-46.htm">Grade Crossing Improvement Program (GCIP)</a><br />
Expand All @@ -177,7 +177,7 @@
</div>
<div role="tabpanel" id="panel12" class="out fade">
<figure>
<img src="img/investinourfuture.jpg" alt="panel 3" />
<img src="img/investinourfuture.jpg" alt="Panel 3" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">Tanker Safety Expert Panel</a><br />
Expand All @@ -197,13 +197,13 @@
<h3>Data attribute (<code>data-wb-tabs='{"interval": 3}'</code>)</h3>
<div class="wb-tabs carousel-s2" data-wb-tabs='{"interval": 3}'>
<ul role="tablist">
<li class="active"><a href="#panel13"><img src="img/protect-environment.jpg" alt="tab 1" /></a></li>
<li><a href="#panel14"><img src="img/banff.jpg" alt="tab 2" /></a></li>
<li><a href="#panel15"><img src="img/investinourfuture.jpg" alt="tab 3" /></a></li>
<li class="active"><a href="#panel13">Tab 1</a></li>
<li><a href="#panel14">Tab 2</a></li>
<li><a href="#panel15">Tab 3</a></li>
</ul>
<div role="tabpanel" id="panel13" class="in fade">
<figure>
<img src="img/protect-environment.jpg" alt="panel 1" />
<img src="img/protect-environment.jpg" alt="Panel 1" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">Renewal of the Aviation Document Booklet</a>&nbsp;<br />
Expand All @@ -214,7 +214,7 @@
</div>
<div role="tabpanel" id="panel14" class="out fade">
<figure>
<img src="img/banff.jpg" alt="panel 2" />
<img src="img/banff.jpg" alt="Panel 2" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/railsafety/publications-46.htm">Grade Crossing Improvement Program (GCIP)</a><br />
Expand All @@ -225,7 +225,7 @@
</div>
<div role="tabpanel" id="panel15" class="out fade">
<figure>
<img src="img/investinourfuture.jpg" alt="panel 3" />
<img src="img/investinourfuture.jpg" alt="Panel 3" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">Tanker Safety Expert Panel</a><br />
Expand All @@ -241,13 +241,13 @@
<h3>CSS classes (<code>slow</code>, <code>fast</code>)</h3>
<div class="wb-tabs carousel-s2 fast">
<ul role="tablist">
<li class="active"><a href="#panel16"><img src="img/protect-environment.jpg" alt="tab 1" /></a></li>
<li><a href="#panel17"><img src="img/banff.jpg" alt="tab 2" /></a></li>
<li><a href="#panel18"><img src="img/investinourfuture.jpg" alt="tab 3" /></a></li>
<li class="active"><a href="#panel16">Tab 1</a></li>
<li><a href="#panel17">Tab 2</a></li>
<li><a href="#panel18">Tab 3</a></li>
</ul>
<div role="tabpanel" id="panel16" class="in fade">
<figure>
<img src="img/protect-environment.jpg" alt="panel 1" />
<img src="img/protect-environment.jpg" alt="Panel 1" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">Renewal of the Aviation Document Booklet</a>&nbsp;<br />
Expand All @@ -258,7 +258,7 @@
</div>
<div role="tabpanel" id="panel17" class="out fade">
<figure>
<img src="img/banff.jpg" alt="panel 2" />
<img src="img/banff.jpg" alt="Panel 2" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/railsafety/publications-46.htm">Grade Crossing Improvement Program (GCIP)</a><br />
Expand All @@ -269,7 +269,7 @@
</div>
<div role="tabpanel" id="panel18" class="out fade">
<figure>
<img src="img/investinourfuture.jpg" alt="panel 3" />
<img src="img/investinourfuture.jpg" alt="Panel 3" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">Tanker Safety Expert Panel</a><br />
Expand All @@ -281,3 +281,33 @@
</div>
</section>
</section>

<section>
<h2>Multimedia player example</h2>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel19">Tab 1</a></li>
<li><a href="#panel20">Tab 2</a></li>
</ul>
<div role="tabpanel" id="panel19" class="in fade wb-mltmd">
<video poster="http://www.servicecanada.gc.ca/eng/video/images/te-lj-eng.jpg" title="Video Example">
<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.webm" />
<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.mp4" />
<track src="../multimedia/cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
</video>
<p class="mrgn-tp-sm mrgn-lft-md"><a href="http://www.servicecanada.gc.ca/eng/video/lj.shtml">Transcript</a></p>
</div>
<div role="tabpanel" id="panel20" class="out fade wb-mltmd">
<video poster="http://www.servicecanada.gc.ca/eng/video/images/dc-td-eng.jpg" title="Video Example">
<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-eng.webm" />
<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-eng.mp4" />
<track src="../multimedia/cpts-lg2-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
</video>
<p class="mrgn-tp-sm mrgn-lft-md"><a href="http://www.servicecanada.gc.ca/eng/video/td.shtml">Transcript</a></p>
</div>
</div>
</div>
</div>
</section>

0 comments on commit f0ebc26

Please sign in to comment.