Difference between revisions of "Widget:MEJS"
(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 9: | Line 9: | ||
== Copy to your site == | == Copy to your site == | ||
To use this widget on your site, just install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''. | To use this widget on your site, just install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''. | ||
− | </noinclude><includeonly><script src="// | + | </noinclude><includeonly><script type="text/javascript" src="https://www.link-elearning.com/linkdl/preview/views/default/script/jquery.js"></script><script type="text/javascript" src="https://www.link-elearning.com:443/linkdl/script/mediaelement/mediaelement-and-player.min.js"></script><link rel="stylesheet" href="https://www.link-elearning.com:443/linkdl/script/mediaelement/linkskin/mediaelementplayer.min.css" type="text/css" media="all"> |
+ | |||
+ | |||
+ | |||
+ | <script> | ||
+ | $(function(){ | ||
+ | $('video,audio').mediaelementplayer({ | ||
+ | success: function (mediaElement, domObject) { | ||
+ | var audio_src = $("li.current").attr("data-url"); | ||
+ | mediaElement.setSrc(audio_src); | ||
+ | mediaElement.addEventListener('ended', function (e) { | ||
+ | mejsPlayNext(e.target); | ||
+ | }, false); | ||
+ | |||
+ | }, | ||
+ | keyActions: [] | ||
+ | }); | ||
+ | |||
+ | $('.mejs-list li').click(function() { | ||
+ | $(this).addClass('current').siblings().removeClass('current'); | ||
+ | var audio_src = $(this).attr("data-url"); | ||
+ | $('audio#mejs:first').each(function(){ | ||
+ | this.player.pause(); | ||
+ | this.player.setSrc(audio_src); | ||
+ | this.player.play(); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | |||
+ | function mejsPlayNext(currentPlayer) { | ||
+ | if ($('.mejs-list li.current').length > 0){ // get the .current song | ||
+ | var current_item = $('.mejs-list li.current:first'); // :first is added if we have few .current classes | ||
+ | var audio_src = $(current_item).next().text(); | ||
+ | $(current_item).next().addClass('current').siblings().removeClass('current'); | ||
+ | console.log('if '+audio_src); | ||
+ | }else{ // if there is no .current class | ||
+ | var current_item = $('.mejs-list li:first'); // get :first if we don't have .current class | ||
+ | var audio_src = $(current_item).next().text(); | ||
+ | $(current_item).next().addClass('current').siblings().removeClass('current'); | ||
+ | console.log('elseif '+audio_src); | ||
+ | } | ||
+ | |||
+ | if( $(current_item).is(':last-child') ) { // if it is last - stop playing | ||
+ | $(current_item).removeClass('current'); | ||
+ | }else{ | ||
+ | currentPlayer.setSrc(audio_src); | ||
+ | currentPlayer.play(); | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
<div id="wrapper"> | <div id="wrapper"> | ||
Line 20: | Line 70: | ||
</div> | </div> | ||
</includeonly> | </includeonly> | ||
− | |||
− | |||
− |
Latest revision as of 02:45, 5 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:MEJS.