最近模板兔在给客户开发一个付费视频课程的功能,使用到了阿里云点播,通过我们的一个插件来对接,但是插件本身虽然支持多视频列表,但是不能分章节展示,所以我们修改了一下,在每一项里增加了一个分类名称,根据分类名称相同来判断是否是同一章,那么在前台显示列表时,我们可以这样来显示:
$cnt = count($vod_ids['src']);
if($cnt > 1){
$video_ccat = '';
$video_menu_html .= '<div class="videos-menu">';
for($i=0; $i<$cnt;$i++){
$cat = $vod_ids['cat'][$i];
$alt = $vod_ids['alt'][$i];
$time = $vod_ids['time'][$i];
$class = ""; if($video_index == $i+1) $class="active";
if($cat && $video_ccat == ''){
$video_ccat = $cat;
$video_menu_html .= '<div class="items"><h3>'.$cat.'</h3>';
}
if($cat && $video_ccat != $cat){
$video_ccat = '';
$video_menu_html .= '</div>';
$i --;
}else{
$video_menu_html .= '<div class="item"><a href="'.add_query_arg("vindex",$i+1,get_permalink()).'" rel="nofollow" class="'.$class.'">· '.$alt.'</a><span>'.$time.'</span></div>';
if($i == $cnt-1){
$video_menu_html .= '</div>';
}
}
}
$video_menu_html .= '</div>';
$video_menu_html .= '<a href="javascript:;" class="vmenu-trigger"><i class="icon icon-arrow-double-left"></i></a>';
}
这样就是在原来列表的基础上增加了一个div以及h3标题来显示大章节标题。最终HTML输出就是:
<div class="videos-menu"> <div class="items"> <h3>第一章</h3> <div class="item"><a href="***?vindex=1" rel="nofollow" class="active">· 1-1</a><span>10:25</span></div> <div class="item"><a href="***?vindex=2" rel="nofollow" class="">· 1-2</a><span>10:25</span></div> <div class="item"><a href="***?vindex=3" rel="nofollow" class="">· 1-3</a><span>10:25</span></div> <div class="item"><a href="***?vindex=4" rel="nofollow" class="">· 1-4</a><span>10:25</span></div> </div> <div class="items"> <h3>第二章</h3> <div class="item"><a href="***?vindex=5" rel="nofollow" class="">· 2-1</a><span>10:25</span></div> <div class="item"><a href="***?vindex=6" rel="nofollow" class="">· 2-2</a><span>10:25</span></div> </div> <div class="items"> <h3>第三章</h3> <div class="item"><a href="***?vindex=7" rel="nofollow" class="">· 3-1</a><span>10:25</span></div> </div> </div>
以上代码仅供实现思路参考。


0 个评论