Difference between revisions of "Widget:PlayWrap"
(Created page with "<noinclude>__NOTOC__ This widget allows you to embed '''[https://github.com/etianen/html5media HTML5 Video Media]''' on your wiki page. Created by [https://www.mediawikiwidge...") |
|||
| Line 11: | Line 11: | ||
</noinclude><includeonly><script src="//gist.githubusercontent.com/jeremejazz/3bf2fb128cd651dc7f84/raw/71ee8fad07cbb026ea6cb566b80548f6ef664a6d/script.js"></script><link rel="stylesheet" href="https://gist.githubusercontent.com/jeremejazz/3bf2fb128cd651dc7f84/raw/71ee8fad07cbb026ea6cb566b80548f6ef664a6d/style.css" /> | </noinclude><includeonly><script src="//gist.githubusercontent.com/jeremejazz/3bf2fb128cd651dc7f84/raw/71ee8fad07cbb026ea6cb566b80548f6ef664a6d/script.js"></script><link rel="stylesheet" href="https://gist.githubusercontent.com/jeremejazz/3bf2fb128cd651dc7f84/raw/71ee8fad07cbb026ea6cb566b80548f6ef664a6d/style.css" /> | ||
| − | <div id="playwrap"> | + | <div id="<!--{$id|escape:'html'|default:'playwrap'}-->" width="<!--{$width|escape:'html'|default:'400px'}-->" style="width:<!--{$width|escape:'html'|default:'400px'}-->; height:<!--{$height|escape:'html'|default:'500px'}-->;"> |
| + | <script> | ||
| + | $(function(){ | ||
| + | $('audio,video').mediaelementplayer({ | ||
| + | loop: true, | ||
| + | shuffle: true, | ||
| + | playlist: true, | ||
| + | audioHeight: 30, | ||
| + | playlistposition: 'bottom', | ||
| + | features: ['playlistfeature', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'playlist', 'current', 'progress', 'duration', 'volume'], | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
<audio id="mejs" src="<!--{$url1|validate:url}-->" type="audio/mp3" controls="controls"></audio> | <audio id="mejs" src="<!--{$url1|validate:url}-->" type="audio/mp3" controls="controls"></audio> | ||
<ul class="mejs-list"> | <ul class="mejs-list"> | ||
| − | + | <li class="current" data-url="<!--{$url1|validate:url}-->"><!--{$title1|escape:'html'|default:'Track 1'}--></li> | |
| − | + | <li data-url="<!--{$url2|validate:url}-->"><!--{$title2|escape:'html'|default:'Track 2'}--></li> | |
| − | + | <li data-url="<!--{$url3|validate:url}-->"><!--{$title3|escape:'html'|default:'Track 3'}--></li> | |
| − | + | <li data-url="<!--{$url4|validate:url}-->"><!--{$title4|escape:'html'|default:'Track 4'}--></li> | |
| − | + | <li data-url="<!--{$url5|validate:url}-->"><!--{$title5|escape:'html'|default:'Track 5'}--></li> | |
| − | + | <li data-url="<!--{$url6|validate:url}-->"><!--{$title6|escape:'html'|default:'Track 6'}--></li> | |
| − | + | <li data-url="<!--{$url7|validate:url}-->"><!--{$title7|escape:'html'|default:'Track 7'}--></li> | |
| − | + | <li data-url="<!--{$url8|validate:url}-->"><!--{$title8|escape:'html'|default:'Track 8'}--></li> | |
| − | + | <li data-url="<!--{$url9|validate:url}-->"><!--{$title9|escape:'html'|default:'Track 9'}--></li> | |
| − | + | <li data-url="<!--{$url10|validate:url}-->"><!--{$title10|escape:'html'|default:'Track 10'}--></li> | |
| − | + | <li data-url="<!--{$url11|validate:url}-->"><!--{$title11|escape:'html'|default:'Track 11'}--></li> | |
| − | + | <li data-url="<!--{$url12|validate:url}-->"><!--{$title12|escape:'html'|default:'Track 12'}--></li> | |
| − | + | <li data-url="<!--{$url13|validate:url}-->"><!--{$title13|escape:'html'|default:'Track 13'}--></li> | |
</ul> | </ul> | ||
| + | |||
| + | <audio controls="controls" autoplay="autoplay"> | ||
| + | <source src="<!--{$url1|validate:url}-->" title="<!--{$title1|escape:'html'|default:'Track 1'}-->" type="audio/mpeg"/> | ||
| + | <source src="<!--{$url2|validate:url}-->3" title="<!--{$title2|escape:'html'|default:'Track 2'}-->" type="audio/mpeg"/> | ||
| + | </audio> | ||
</div> | </div> | ||
</includeonly> | </includeonly> | ||
Revision as of 03:25, 4 July 2019
This widget allows you to embed HTML5 Video Media on your wiki page.
Created by taipan
Using this widget
For information on how to use this widget, see widget description page on MediaWikiWidgets.org.
Copy to your site
To use this widget on your site, just install MediaWiki Widgets extension and copy the full source code of this page to your wiki as page Widget:PlayWrap.
