mep-feature-playlist, MediaElement.js的播放列表插件

分享于 

3分钟阅读

GitHub

  繁體 雙語
MediaElement.js playlists for video and audio tags
  • 源代码名称:mep-feature-playlist
  • 源代码网址:http://www.github.com/duozersk/mep-feature-playlist
  • mep-feature-playlist源代码文档
  • mep-feature-playlist源代码下载
  • Git URL:
    git://www.github.com/duozersk/mep-feature-playlist.git
    Git Clone代码到本地:
    git clone http://www.github.com/duozersk/mep-feature-playlist
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/duozersk/mep-feature-playlist
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    mep-feature-playlist-- MediaElement.js的播放列表插件

    [Demo] ( http://andrewberezovsky.ru/demo/backgroundaudio7/ )

    使用方法:

    1 - 下载收费的[MediaElement.js] ( http://mediaelementjs.com/ )

    2 - 下载收费的[mep-feature-playlist] ( https://github.com/duozersk/mep-feature-playlist/archive/master.zip )

    3 - 包括

    • mediaelement-and-player.js
    • mediaelementplayer.min.css
    • mep-feature-playlist.js
    • mep-feature-playlist.css

    4 - 将这里代码添加到页面中:

    
    <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>
    
    
    
    

    选项:

    • 循环 - 循环播放播放列表;默认为'false"'
    • 收费 shuffle - 无序播放列表;默认为''
    • 收费 playlist - 控制默认显示播放列表,默认为''
    • playlistposition可以是或者'底部'在播放器顶部显示播放列表,也可以在它的下方显示;默认为''

    功能:

    • playlistfeature - 一般功能启用播放列表功能;仅构建内部播放列表层,如果你想使用播放列表,它应该存在
    • prevtrack - 按钮在播放列表中播放上一个曲目
    • nexttrack - 按钮在播放列表中播放下一个曲目
    • 循环 - 切换重复或者关闭重复
    • shuffle shuffle打开或者关闭无序切换
    • 播放列表 - 显示/隐藏播放列表的播放列表按钮

    5 - 添加音频标记和音轨:

    
    <audio controls="controls" autoplay="autoplay">
    
    
     <source src="media/AirReview-Landmarks-02-ChasingCorporate.mp3" title="Chasing Corporate" type="audio/mpeg"/>
    
    
     <source src="media/framing.mp3" title="Framing" type="audio/mpeg"/>
    
    
    </audio>
    
    
    
    

    如果没有指定标题,它将使用标题属性作为轨迹名,返回到文件名。

    屏幕截图

    播放列表折叠

    MediaElement.js Collapsed playlist

    播放列表扩展

    MediaElement.js Expanded playlist

    • 黄色- 播放曲目
    • 绿色- 在单击时播放

    有关 MediaElement.js的更多选项和安装说明可以在 [here] ( http://mediaelementjs.com/#installation ) 中找到。


    相关文章