Javascript调用播放列表

定义两个图层，一个是播放器模块video_main，一个是播放列表video_menu

 </div>

<ul>

</ul>

</div>

定义css，设置显示大小

.video{ width:620px; height:454px; position:relative; }

.video .video_menu{ width:450px;background-color:#eeeeee;color:#3c3c3c;top:0px; height: 80px; padding-left: 2px; overflow:scroll; }

.video .video_menu ul {padding-left:10px;padding-top:0px}

.video .video_menu ul li{cursor: pointer;list-style:none;padding-top:5px}

利用保利威的getPlayListById接口拿到播放列表的json数据

$(function(){

var pics = 4;

$.getJSON("http://v.polyv.net/uc/services/rest?jsonp=?", {method:"getPlayListById", readtoken:"1uj9yCBCGG-1fJw8Em9ee-UeC1wwmfE1", id:"1366081986209"}, function(json){

var container = $(".video");

var video_list = json.data[0].videolist;

for (var i in video_list) {

var v = video_list[i];

var li = $("<li>");

li.append(v.title);

li.attr("vid", v.vid);

li.bind("click", function(){

var li = $(this);

if (navigator.userAgent.match(/iP(od|hone|ad)/i)) {

var html5 = '<video id="cimcvideo" width="450" height="334" src="http://v.polyv.net/uc/video/getMp4?vid='+li.attr("vid")+'" preload controls></video>';

$(".video_main", container).children().remove();

$(".video_main", container).append(html5);

}else{

var swf = "http://player.polyv.net/videos/"+li.attr("vid")+".swf";

var embed = $('<embed width="450" height="334" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowscriptaccess="always" allowfullscreen="true" name="polyvplayer"></embed>');

embed.attr("src", swf);

$(".video_main", container).children().remove();

$(".video_main", container).append(embed);

}

});

$(".video_menu ul", container).append(li);

}

$(".video_menu ul li:first", container).click();

});

演示例子：

http://jsfiddle.net/abZ9U/

产品咨询:

电话咨询

Javascript调用播放列表