Jsf 如何添加具有多个mp3源的媒体播放器_Jsf_Primefaces_Media

Jsf 如何添加具有多个mp3源的媒体播放器

jsf primefaces

Jsf 如何添加具有多个mp3源的媒体播放器,jsf,primefaces,media,Jsf,Primefaces,Media,我正在寻找一种机制，以显示媒体播放器与多个来源的MP3（附加图像）使用primefaces有一个标记： <p:media value="http://www.stephaniequinn.com/Music/Mozart%20-%20Presto.mp3" width="200" height="20" player="quicktime" /> 但它允许一次只能有一块。我在这方面取得了很好的效果。它可能并不完全是您想要的，但它完全是客户端（即：JavaScript），并在

我正在寻找一种机制，以显示媒体播放器与多个来源的MP3（附加图像）

使用primefaces有一个标记：

<p:media value="http://www.stephaniequinn.com/Music/Mozart%20-%20Presto.mp3" width="200" height="20" player="quicktime" />

但它允许一次只能有一块。

我在这方面取得了很好的效果。它可能并不完全是您想要的，但它完全是客户端（即：JavaScript），并在您更改站点页面时继续播放。是的，它允许多个文件

例如，默认设置生成以下代码：

<script type="text/javascript" src="http://www.wikplayer.com/code.js" data-config=" ... " ></script>

很明显，大多数设置都是这样做的，要添加更多曲目，只需在

播放列表

数组中添加更多对象，每次都将

标题

和

url

指定为url编码参数。

我与您分享我找到的解决方案

在bean中，我生成一个JSON字符串，如下所示：

@ManagedBean public class AudioBean {

private String json = "[{'title':'MUSIC CALME','url':'http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DMK6heUdRr-E'},"
        + "         {'title':'Selena Gomez - Come & Get It','url':'https://www.youtube.com/watch?v=n-D1EB74Ckg&list=RDn-D1EB74Ckg'},"
        + "     {'title':'Demi Lovato - Heart Attack','url':'https://www.youtube.com/watch?v=AByfaYcOm4A&index=3&list=RDn-D1EB74Ckg'}]";

public String getJson() {
    return json;
}

public void setJson(String json) {
    this.json = json;
} }

在XHTML页面中，我通过El表达式调用json属性：

<body>
<script type="text/javascript" src="http://www.wikplayer.com/code.js"
    data-config="{'skin':'skins/wikfull/ribbonRed/skin.css','volume':62,'autoplay':true,'shuffle':true,'repeat':0,'showcomment':false,'marqueetexton':true,'placement':'top','showplaylist':false,
    'playlist':
        #{audioBean.json}
}">
</script>

我将标题和URL存储在数据库中，是否有方法使用您的方法生成它？还是静态的？您可以在facelets页面中创建播放列表“javascript”部分。只需在stackoverflow中搜索javascript EL。我想我已经为你的建议找到了解决办法。我生成了一个表示JSON流的字符串，并将其直接放入脚本中。脚本将生成以下内容：[{'title'，'Title0'，'url'：url 0'}，{'title'，'Title1'，'url'：url'：url 2'}，{'title'，'Title2'，'url'：url 3'}]

<body>
<script type="text/javascript" src="http://www.wikplayer.com/code.js"
    data-config="{'skin':'skins/wikfull/ribbonRed/skin.css','volume':62,'autoplay':true,'shuffle':true,'repeat':0,'showcomment':false,'marqueetexton':true,'placement':'top','showplaylist':false,
    'playlist':
        #{audioBean.json}
}">
</script>