Carousel 播放器实现

需求是实现一个Carousel,有一个Index和具体的View,View中的实现可能是Image, audio, 或者是Video。点击Index中的每一荐,View进行切换。

实现方式 一(大插件):

将Carousel, Audio/Video Player都加载在一个大的View上。

carousel 切换slide时,根据类型创建不同view的,然后初始化其中的player对象,将旧的对象删除。

不好的地方是,页面加载东西过多,逻辑不清晰,Carousel和View之前的耦合,添加其它类型View时不方便。

实现方式 二(充分解耦):

音频、视频最好的处理方式是应该像youku一样,放在一个通用的地方,由iframe来进行加载。

想法是,把所有的audio, video都放到另一个页面中,用iframe来实现插入。每次切换都是更换其中的iframe。

这样就实现了具体页面和Carousel/Slider之间的接耦,无论是一个什么类型的,只要有自己的view,由iframe嵌入进来就OK了。而view的实现由第三方进行实现,想换播放器,只要将iframe内的url进行升级就OK了。 Carousel/Slider的实现也相对简单。

可能问题

性能,问了下,性能在桌面应该没有大问题。

YY代码

这个库会有两个文件,js处理业务,可以用jQuery的plugin方式实现,而CSS处理View。css可以被复写实现自定义View

1
2
3
4
5
6
<head>
<!-- other stuff here -->
<script src="jquery.min.js"></script>
<script src="jquery.carousel.js"></script>
<link href="carousel.css" rel="stylesheet" />
</head>

它的数据源应该用这样的方式来绑定:

1
2
3
4
5
6
7
8
<ul class="carousel">
<li>
<iframe src="http://player.lanvige.com/video/17914974" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>

在document.ready时,可以调用carousel的start,将view中的数据换成carousel播放器。

1
2
3
$(document).ready(function(){
$('.carousel').start();
});

REF::