視頻網站視頻縮略圖顯示

上傳視頻得到視頻的某一幀的縮略圖可由jsp或者php等實現，記錄一下很簡單的縮略圖顯示在頁面，鼠標通過，播放按鈕顯示，和通常視頻網站上同樣。

html代碼

<div class="left news_right">
            <div>
                <div class="news_center_content_top">視頻新聞</div>
                <div class="videos" align="center">
                    <a class="hd" title="杭州Hello Kitty主題公園遊7月動工" href="#">
                        <img src="${pageContext.request.contextPath}/p_w_picpaths/0511007.jpg" alt="杭州Hello Kitty主題公園遊7月動工" style="border:1px solid #eeeeee;" />
                        <span class="play"></span>
                    </a>
                </div>
            </div>
        </div>

css代碼

.news_right {
    margin-left:10px;
    width:180px;
}
.news_center_content_top {
    background:url("../p_w_picpaths/title_news.gif") no-repeat left top;
    height: 20px;
    padding: 7px 0 0 10px;
    font-weight:bold;
}
.videos .hd {
    height: 90px;
    overflow: hidden;
    padding: 0 4px 4px 0;
    width: 120px;
    display: block;
    margin-bottom: 2px;
    position: relative;
    text-decoration: none;
}
.videos .hd img {
    display: block;
}
.videos .play {
    left: 44px;
    top: 29px;
    background: url("../p_w_picpaths/play_icon.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 32px;
    position: absolute;
    visibility: hidden;
    width: 32px;
}
.videos .hd:hover .play {
    visibility:visible;
}

把下面的圖片放到p_w_picpaths文件夾下便可