最近模板兔在给客户开发一个付费视频课程的功能,使用到了阿里云点播,通过我们的一个插件来对接,但是插件本身虽然支持多视频列表,但是不能分章节展示,所以我们修改了一下,在每一项里增加了一个分类名称,根据分类名称相同来判断是否是同一章,那么在前台显示列表时,我们可以这样来显示:
$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 个评论