React-JplayList
React-JplayList是React-Jplayer的一个附加组件，可提供播放列表功能和组件供您使用。
- 例子
- 安装
- NPM
- UMD
- 特征
- 支持的浏览器
- 文档
-
initializeOptions(jPlayerOptions, jPlaylistOptions)：必需 -
reducer()：必需 - 动作
- 选项
-
playlist（数组：对象）：必需 -
loopOnPrevious（bool） -
shuffleOnLoop（布尔） -
loop（字符串） -
hidePlaylist（bool）
-
- 成分
-
JPlaylist：必需 Playlist-
Remove -
MediaLink -
Title -
Poster -
TogglePlaylist -
Previous -
Next -
Shuffle -
Repeat
-
-
例子
https://githu*b.c*o*m/jplayer/reeact-jplayer-examples
安装
NPM
npm install --save react-jplaylist
UMD
使用此软件包的推荐方法是通过NPM和WebPack。但是，如果您坚持包括.js和.css文件手动，则可以从/dist/文件夹中获得未启示和缩小的版本。该软件包的依赖项已被排除在UMD构建中，因此您需要按照React-jplayer-example的UMDPlayList中所示手动包含它们。
该模块被导出到称为ReactJPlaylist的变量。
特征
- 与许多遗留不同的HTML5浏览器兼容
- 返回，向前，洗牌，播放列表选择，播放列表循环
- 完全自定义，模块化和组件
- 为您的玩家带来了完全恢复性的CSS皮肤
支持的浏览器
与React-Jplayer相同
文档
initializeOptions(jPlayerOptions, jPlaylistOptions) ：必需
用于为您的JplayList设置默认选项。 Deep将您传递的选项与React-Jplayer和React-Jplaylist的默认选项合并。结果的结果用作您的JplayList的初始状态。
争论
-
jPlayerOptions（对象）：为JplayList指定的JPLAYER选项。 -
jPlaylistOptions（对象）：为JplayList指定的JplayList选项。
reducer() ：必需
每当派遣JplayList函数时，Jplaylist还原器将被称为。必须用名为“ JplayLists”的钥匙将其传递给您的商店。
动作
所有操作都需要使用REDUXES dispatch函数来派遣，就像您在动作中一样。
setOption(id, key, value)
设置任何JplayList选项。
争论
-
id（字符串）：将其应用于JplayList的ID。 -
key（字符串）：要设置的选项的名称。不支持指定嵌套键。 -
value（ANY）：设置选项的值。
setPlaylist(id, playlist)
设置Jplaylist的播放列表。您无需在JplayList load上使用此方法，因为此方法是在componentDidMount上自动调用的，其中包含您在options.playlist中提供的播放列表。
争论
-
id（字符串）：将其应用于JplayList的ID。 -
playlist（数组：对象）：将设置为JplayList的新播放列表。
add(id, media, playNow?)
将媒体添加到播放列表的末尾。
争论
-
id（字符串）：将其应用于JplayList的ID。 -
media（对象）：要添加到您的播放列表中的媒体。 -
playNow（Bool）：添加后，可选地播放媒体。
remove(id, index)
以指定的索引从播放列表中删除媒体。
争论
-
id（字符串）：将其应用于JplayList的ID。 -
index（编号）：播放列表数组的索引要删除。
clear(id)
清除播放列表数组，并将一些Jplaylist值重置回默认值。
争论
-
id（字符串）：将其应用于JplayList的ID。
play(id, index?)
播放Jplaylist。如果没有提供索引，则播放当前的媒体。
争论
-
id（字符串）：将其应用于JplayList的ID。 -
index（编号）：可选地在提供的索引上播放媒体。
shuffle(id, shuffled?, playNow?)
洗牌播放列表。
争论
-
id（字符串）：将其应用于JplayList的ID。 -
shuffled（bool）：如果未给出参数，则切换洗牌设置。真实地将播放列表随机播放。如果被改组，假会拆除。 -
playNow（Bool）：一旦播放，它就可以选择地播放媒体。
next(id)
在播放列表中播放下一个媒体项目。
争论
-
id（字符串）：将其应用于JplayList的ID。
previous(id)
在播放列表中播放以前的媒体项目。
争论
-
id（字符串）：将其应用于JplayList的ID。
选项
该对象中的属性用于初始化JplayList。它们与默认的Jplaylist选项深入合并。
playlist （数组：对象）：必需
JplayList将在加载列表中自动加载该选项的播放列表。数组中的每个对象都应与React-Jplayer的媒体架构相同，但也必须包括一个可以是字符串或数字的ID。
例如
媒体：{{id：0，// react jplayer媒体选项在这里…}}
id需要是数字或字符串。
loopOnPrevious （bool）
默认值：true
播放列表将在调用previous()时循环回到结束。
shuffleOnLoop （布尔）
默认值：true
如果循环为“循环播放列表”并且洗牌是正确的，则播放列表在最后一项上调用next()时会随机散步。
loop （字符串）
默认值：“ loop-playlist”
Jplaylist在循环中识别三个设置：
- “ OFF”：不循环播放列表或当前媒体，在调用
next()时停止最后一项。 - “循环”：循环播放列表中的当前媒体。
- “ loop-playList”：在最后一项上调用
next()时，将整个播放列表循环。
hidePlaylist （bool）
默认值：false
隐藏或显示播放列表。内部与TogglePlaylist组件一起使用。
成分
JPlaylist ：必需
道具
-
children（元素）：必需：必须是Jplayer组件。 -
id（字符串）：必需：必须与您提供给Jplayer选项的id相同。 -
keyBindings（对象）：指定按下该键时要应用的键键。深层将这些道具与Jplaylist的默认键键合并。有关更多信息，请参见React-Jplayer的钥匙扣。
默认：
keyBindings: {
next: {
key: 221, // ]
fn: () => dispatch(next(id)),
},
previous: {
key: 219, // [
fn: () => dispatch(previous(id)),
},
shuffle: {
key: 83, // s
fn: () => dispatch(shuffle(id, undefined, true)),
},
loop: {
key: 76, // l
fn: () => {
const loop = getLoopState(stateProps.loop);
dispatch(setOption(id, \'loop\', loop));
},
},
}
此组件需要包装Jplayer组件
Playlist
道具
-
children（节点）：必需
任何是该组件的孩子的组件都将被重复x x，其中x是您的播放列表的大小。
Remove
道具
-
children（节点）：必需
默认值： ×
应作为Playlist组件的孩子嵌套。为您的播放列表中的每个媒体提供删除控件。
MediaLink
道具
-
children（节点）：必需
应作为Playlist组件的孩子嵌套。呈现播放列表的媒体链接，并允许用户在播放列表中选择其他媒体。
Title
默认值： media.artist media.title
应作为Playlist组件的孩子嵌套。使艺术家和当前媒体的头衔。
Poster
应作为Playlist组件的孩子嵌套。提供当前媒体的海报。
TogglePlaylist
道具
-
children（节点）：必需
与hidePlaylist属性结合使用。切换播放列表onClick的景象。
Previous
道具
-
children（节点）：必需
onClick在内部拨打previous一个动作，并将媒体设置为上一个项目。
Next
道具
-
children（节点）：必需
onClick在内部拨打next操作，并将媒体设置为下一个项目。
Shuffle
道具
-
children（节点）：必需
onClick在内部打电话给shuffle Action，并将媒体洗牌。
Repeat
道具
-
children（节点）：必需
onClick在内部调用setOption操作，并将循环设置为下一个状态，即如果循环当前“关闭”，则单击此组件将将循环状态设置为\’loop\’。
