ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fragaloop and docs

Browse Source
This commit is contained in:
Sam Potts 2015-10-25 12:02:42 +11:00
parent 125a95e9e1
commit 8f80e4fa65
3 changed files with 36 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

68
docs/index.html
View File

@ -36,48 +36,42 @@
<main role="main" id="main"> <main role="main" id="main">
<nav class="btn-bar nav-panel"> <nav class="btn-bar nav-panel">
<ul> <ul>
<li><a href="#video" class="btn active btn-small">Video</a></li> <li>
<li><a href="#youtube" class="btn btn-small">YouTube</a></li> <button type="button" class="btn active" data-source="video">Video</button>
<li><a href="#audio" class="btn btn-small">Audio</a></li> </li>
<li>
<button type="button" class="btn" data-source="audio">Audio</button>
</li>
<li>
<button type="button" class="btn btn-youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
</li>
<li>
<button type="button" class="btn btn-vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
</li>
</ul> </ul>
</nav> </nav>
<div class="panels"> <section>
<section class="panel example-video active" id="video"> <div class="plyr">
<div class="player"> <video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
<video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin> <!-- Video files -->
<!-- Video files --> <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
<source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4"> <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
<source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
<!-- Text track file --> <!-- Text track file -->
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default> <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>
<!-- Fallback for browsers that don't support the <video> element --> <!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a> <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
</video> </video>
</div> </div>
<small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
</section>
<section class="panel example-video" id="youtube">
<div class="player">
<div data-video-id="Au87oAJ2jeE" data-type="youtube"></div>
</div>
<small>Envato's "Made By" interview of <a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Dan Cederholm</a> from <a href="https://dribbble.com" target="_blank">Dribbble</a>.</small>
</section>
<section class="panel example-audio" id="audio">
<div class="player">
<audio controls>
<!-- Audio files -->
<source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
<source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
<!-- Fallback for browsers that don't support the <audio> element --> <ul>
<a href="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a> <li class="cite cite-video"><small><a href="https://www.bigbuckbunny.org" target="_blank">Big Buck Bunny</a> &copy; Copyright 2008, Blender Foundation</small></li>
</audio> <li class="cite cite-audio"><small><a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">96 by Logistics</a> &copy; Copyright, Hospital Records</small></li>
</div> <li class="cite cite-youtube"><small><a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Envato's "Made By" interview of Dan Cederholm</a> on <span class="color-youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small>
<small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small> <li class="cite cite-vimeo"><small><a href="https://vimeo.com/87701971" target="_blank">Yosemite HD II</a> on <span class="color-vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small>
</section> </ul>
</div> </section>
</main> </main>
<!-- Load SVG defs --> <!-- Load SVG defs -->

2
src/js/plyr.js
View File

@ -107,7 +107,7 @@
}, },
urls: { urls: {
vimeo: { vimeo: {
api: 'https://cdn.rawgit.com/vimeo/player-api/master/javascript/froogaloop.js' api: 'https://f.vimeocdn.com/js/froogaloop2.min.js'
}, },
youtube: { youtube: {
api: 'https://www.youtube.com/iframe_api' api: 'https://www.youtube.com/iframe_api'