轉(zhuǎn)載自:[http://m.survivalescaperooms.com/dennisit/archive/2013/02/16/2913287.html]

視頻網(wǎng)站中提供的在線視頻播放功能,播放的都是FLV格式的文件,它是Flash動(dòng)畫(huà)文件,可通過(guò)Flash制作的播放器來(lái)播放該文件.項(xiàng)目中用制作的player.swf播放器.

多媒體視頻處理工具FFmpeg有非常強(qiáng)大的功能包括視頻采集功能、視頻格式轉(zhuǎn)換、視頻抓圖、給視頻加水印等。

ffmpeg視頻采集功能非常強(qiáng)大，不僅可以采集視頻采集卡或USB攝像頭的圖像，還可以進(jìn)行屏幕錄制，同時(shí)還支持以RTP方式將視頻流傳送給支持RTSP的流媒體服務(wù)器，支持直播應(yīng)用。

1.能支持的格式

ffmpeg能解析的格式：（asx，asf，mpg，wmv，3gp，mp4，mov，avi，flv等）

2.不能支持的格式

對(duì)ffmpeg無(wú)法解析的文件格式(wmv9，rm，rmvb等),可以先用別的工具（mencoder）轉(zhuǎn)換為avi(ffmpeg能解析的)格式.

實(shí)例是將上傳視頻轉(zhuǎn)碼為flv格式,該格式ffmpeg支持,所以我們實(shí)例中需要ffmpeg視頻處理工具.

數(shù)據(jù)庫(kù)MySQL5.5

實(shí)例所需要的數(shù)據(jù)庫(kù)腳本

drop database if exists db_mediaplayer;create database db_mediaplayer;use db_mediaplayer;create table tb_media(    id int not null PRimary key auto_increment comment '主鍵' ,     title varchar(50) not null comment '視頻名稱' ,    src varchar(200) not null comment '視頻存放地址' ,    picture varchar(200) not null comment '視頻截圖' ,    descript varchar(400) comment '視頻描述' ,    uptime varchar(40) comment '上傳時(shí)間');desc tb_media;

項(xiàng)目結(jié)構(gòu)圖:

上傳視頻界面設(shè)計(jì)

在上傳文件時(shí),Form表單中 enctype屬性值必須為"multipart/form-data".模塊界面設(shè)計(jì)如下圖:

enctype屬性值說(shuō)明

application/x-www-form-urlencoded

表單數(shù)據(jù)被編碼為名稱/值對(duì),這是標(biāo)準(zhǔn)的編碼格式

multipart/form-data

表單數(shù)據(jù)被編碼為一條消息,頁(yè)面上每個(gè)控件對(duì)應(yīng)消息中的一部分

text/plain

表單數(shù)據(jù)以純文本形式進(jìn)行編碼,其中不含任何控件格式的字符

業(yè)務(wù)接口定義

面向接口編程,接口中定義系統(tǒng)功能模塊.這樣方便理清業(yè)務(wù),同時(shí)接口的對(duì)象必須由實(shí)現(xiàn)了該接口的對(duì)象來(lái)創(chuàng)建.這樣就避免編碼中的某些業(yè)務(wù)遺漏等,同時(shí)擴(kuò)展性也增強(qiáng)了.

package com.webapp.dao;import java.util.List;import com.webapp.entity.Media;/** * *  MediaDao.java     * *  @version ： 1.1 *   *  @author  ： 蘇若年    <a href="mailto:DennisIT@163.com">發(fā)送郵件</a> *     *  @since     ： 1.0        創(chuàng)建時(shí)間:    2013-2-07        上午10:19:54 *      *  TODO     :    interface MediaDao.java is used for ... * */public interface MediaDao {        /**     * 視頻轉(zhuǎn)碼     * @param ffmpegPath    轉(zhuǎn)碼工具的存放路徑     * @param upFilePath    用于指定要轉(zhuǎn)換格式的文件,要截圖的視頻源文件     * @param codcFilePath    格式轉(zhuǎn)換后的的文件保存路徑     * @param mediaPicPath    截圖保存路徑     * @return     * @throws Exception     */    public boolean executeCodecs(String ffmpegPath,String upFilePath, String codcFilePath, String mediaPicPath)throws Exception;        /**     * 保存文件     * @param media     * @return     * @throws Exception     */    public boolean saveMedia(Media media)throws Exception;    /**     * 查詢本地庫(kù)中所有記錄的數(shù)目     * @return     * @throws Exception     */    public int getAllMediaCount()throws Exception;        /**     * 帶分頁(yè)的查詢     * @param firstResult     * @param maxResult     * @return     */    public List<Media> queryALlMedia(int firstResult, int maxResult)throws Exception;        /**     * 根據(jù)Id查詢視頻     * @param id     * @return     * @throws Exception     */    public Media queryMediaById(int id)throws Exception;}

接口的實(shí)現(xiàn),這里列出ffmpeg視頻轉(zhuǎn)碼與截圖模塊

    /**     * 視頻轉(zhuǎn)碼     * @param ffmpegPath    轉(zhuǎn)碼工具的存放路徑     * @param upFilePath    用于指定要轉(zhuǎn)換格式的文件,要截圖的視頻源文件     * @param codcFilePath    格式轉(zhuǎn)換后的的文件保存路徑     * @param mediaPicPath    截圖保存路徑     * @return     * @throws Exception     */    public boolean executeCodecs(String ffmpegPath, String upFilePath, String codcFilePath,            String mediaPicPath) throws Exception {        // 創(chuàng)建一個(gè)List集合來(lái)保存轉(zhuǎn)換視頻文件為flv格式的命令        List<String> convert = new ArrayList<String>();        convert.add(ffmpegPath); // 添加轉(zhuǎn)換工具路徑        convert.add("-i"); // 添加參數(shù)＂-i＂，該參數(shù)指定要轉(zhuǎn)換的文件        convert.add(upFilePath); // 添加要轉(zhuǎn)換格式的視頻文件的路徑        convert.add("-qscale");     //指定轉(zhuǎn)換的質(zhì)量        convert.add("6");        convert.add("-ab");        //設(shè)置音頻碼率        convert.add("64");        convert.add("-ac");        //設(shè)置聲道數(shù)        convert.add("2");        convert.add("-ar");        //設(shè)置聲音的采樣頻率        convert.add("22050");        convert.add("-r");        //設(shè)置幀頻        convert.add("24");        convert.add("-y"); // 添加參數(shù)＂-y＂，該參數(shù)指定將覆蓋已存在的文件        convert.add(codcFilePath);        // 創(chuàng)建一個(gè)List集合來(lái)保存從視頻中截取圖片的命令        List<String> cutpic = new ArrayList<String>();        cutpic.add(ffmpegPath);        cutpic.add("-i");        cutpic.add(upFilePath); // 同上（指定的文件即可以是轉(zhuǎn)換為flv格式之前的文件，也可以是轉(zhuǎn)換的flv文件）        cutpic.add("-y");        cutpic.add("-f");        cutpic.add("image2");        cutpic.add("-ss"); // 添加參數(shù)＂-ss＂，該參數(shù)指定截取的起始時(shí)間        cutpic.add("17"); // 添加起始時(shí)間為第17秒        cutpic.add("-t"); // 添加參數(shù)＂-t＂，該參數(shù)指定持續(xù)時(shí)間        cutpic.add("0.001"); // 添加持續(xù)時(shí)間為1毫秒        cutpic.add("-s"); // 添加參數(shù)＂-s＂，該參數(shù)指定截取的圖片大小        cutpic.add("800*280"); // 添加截取的圖片大小為350*240        cutpic.add(mediaPicPath); // 添加截取的圖片的保存路徑        boolean mark = true;        ProcessBuilder builder = new ProcessBuilder();        try {            builder.command(convert);            builder.redirectErrorStream(true);            builder.start();                        builder.command(cutpic);            builder.redirectErrorStream(true);            // 如果此屬性為 true，則任何由通過(guò)此對(duì)象的 start() 方法啟動(dòng)的后續(xù)子進(jìn)程生成的錯(cuò)誤輸出都將與標(biāo)準(zhǔn)輸出合并，            //因此兩者均可使用 Process.getInputStream() 方法讀取。這使得關(guān)聯(lián)錯(cuò)誤消息和相應(yīng)的輸出變得更容易            builder.start();        } catch (Exception e) {            mark = false;            System.out.println(e);            e.printStackTrace();        }        return mark;    }

系統(tǒng)中可能存在多個(gè)模塊,這些模塊的業(yè)務(wù)DAO可以通過(guò)工廠來(lái)管理,需要的時(shí)候直接提供即可.

因?yàn)槿绻麑?duì)象new太多,會(huì)不必要的浪費(fèi)資源.所以工廠,采用單例模式,私有構(gòu)造,提供對(duì)外可訪問(wèn)的方法即可.

package com.webapp.dao;import com.webapp.dao.impl.MediaDaoImpl;/** * *  DaoFactory.java     * *  @version ： 1.1 *   *  @author  ： 蘇若年    <a href="mailto:DennisIT@163.com">發(fā)送郵件</a> *     *  @since     ： 1.0        創(chuàng)建時(shí)間:    2013-2-07        下午02:18:51 *      *  TODO     :    class DaoFactory.java is used for ... * */public class DaoFactory { //工廠模式,生產(chǎn)Dao對(duì)象,面向接口編程,返回實(shí)現(xiàn)業(yè)務(wù)接口定義的對(duì)象        private static DaoFactory daoFactory = new DaoFactory();        //單例設(shè)計(jì)模式, 私有構(gòu)造,對(duì)外提供獲取創(chuàng)建的對(duì)象的唯一接口,    private DaoFactory(){            }        public static DaoFactory getInstance(){        return daoFactory;    }        public static MediaDao getMediaDao(){        return new MediaDaoImpl();    }}

視圖提交請(qǐng)求,給控制器,控制器分析請(qǐng)求參數(shù),進(jìn)行相應(yīng)的業(yè)務(wù)調(diào)用處理.servlet控制器相關(guān)代碼如下

package com.webapp.service;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.List;import javax.servlet.ServletContext;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;import com.webapp.dao.DaoFactory;import com.webapp.dao.MediaDao;import com.webapp.entity.Media;import com.webapp.util.DateTimeUtil;/** * *  MediaService.java     * *  @version ： 1.1 *   *  @author  ： 蘇若年    <a href="mailto:DennisIT@163.com">發(fā)送郵件</a> *     *  @since     ： 1.0        創(chuàng)建時(shí)間:    2013-2-08        下午02:24:47 *      *  TODO     :    class MediaService.java is used for ... * */public class MediaService extends HttpServlet {        public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doPost(request, response);    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        PrintWriter out = response.getWriter();        MediaDao mediaDao = DaoFactory.getMediaDao();        String message = "";                String uri = request.getRequestURI();        String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));                if("/uploadFile".equals(path)){            //提供解析時(shí)的一些缺省配置            DiskFileItemFactory factory = new DiskFileItemFactory();                        //創(chuàng)建一個(gè)解析器,分析InputStream,該解析器會(huì)將分析的結(jié)果封裝成一個(gè)FileItem對(duì)象的集合            //一個(gè)FileItem對(duì)象對(duì)應(yīng)一個(gè)表單域            ServletFileUpload sfu = new ServletFileUpload(factory);                    try {                Media media = new Media();                List<FileItem> items = sfu.parseRequest(request);                boolean flag = false;    //轉(zhuǎn)碼成功與否的標(biāo)記                for(int i=0; i<items.size(); i++){                    FileItem item = items.get(i);                    //要區(qū)分是上傳文件還是普通的表單域                    if(item.isFormField()){//isFormField()為true,表示這不是文件上傳表單域                        //普通表單域                        String paramName = item.getFieldName();                        /*                            String paramValue = item.getString();                            System.out.println("參數(shù)名稱為:" + paramName + ", 對(duì)應(yīng)的參數(shù)值為: " + paramValue);                        */                        if(paramName.equals("title")){                            media.setTitle(new String(item.getString().getBytes("ISO8859-1"),"UTF-8"));                        }                        if(paramName.equals("descript")){                            media.setDescript(new String(item.getString().getBytes("ISO8859-1"),"UTF-8"));                        }                                            }else{                        //上傳文件                        //System.out.println("上傳文件" + item.getName());                        ServletContext sctx = this.getServletContext();                        //獲得保存文件的路徑                        String basePath = sctx.getRealPath("videos");                        //獲得文件名                        String fileUrl= item.getName();                        //在某些操作系統(tǒng)上,item.getName()方法會(huì)返回文件的完整名稱,即包括路徑                        String fileType = fileUrl.substring(fileUrl.lastIndexOf(".")); //截取文件格式                        //自定義方式產(chǎn)生文件名                        String serialName = String.valueOf(System.currentTimeMillis());                        //待轉(zhuǎn)碼的文件                        File uploadFile = new File(basePath+"/temp/"+serialName + fileType);                        item.write(uploadFile);                                                if(item.getSize()>500*1024*1024){                            message = "<li>上傳失敗！您上傳的文件太大,系統(tǒng)允許最大文件500M</li>";                        }                        String codcFilePath = basePath + "/" + serialName + ".flv";                //設(shè)置轉(zhuǎn)換為flv格式后文件的保存路徑                        String mediaPicPath = basePath + "/images" +File.separator+ serialName + ".jpg";    //設(shè)置上傳視頻截圖的保存路徑                                                // 獲取配置的轉(zhuǎn)換工具（ffmpeg.exe）的存放路徑                        String ffmpegPath = getServletContext().getRealPath("/tools/ffmpeg.exe");                                                media.setSrc("videos/" + serialName + ".flv");                        media.setPicture("videos/images/" +serialName + ".jpg");                        media.setUptime(DateTimeUtil.getYMDHMSFormat());                                                //轉(zhuǎn)碼                                                flag = mediaDao.executeCodecs(ffmpegPath, uploadFile.getAbsolutePath(), codcFilePath, mediaPicPath);                    }                }                if(flag){                    //轉(zhuǎn)碼成功,向數(shù)據(jù)表中添加該視頻信息                    mediaDao.saveMedia(media);                    message = "<li>上傳成功!</li>";                }                                request.setAttribute("message", message);                request.getRequestDispatcher("media_upload.jsp").forward(request,response);                                        } catch (Exception e) {                e.printStackTrace();                throw new ServletException(e);            }        }                if("/queryAll".equals(path)){            List<Media> mediaList;            try {                mediaList = mediaDao.queryALlMedia(0,5);                request.setAttribute("mediaList", mediaList);                request.getRequestDispatcher("media_list.jsp").forward(request, response);            } catch (Exception e) {                e.printStackTrace();            }        }                if("/play".equals(path)){            String idstr = request.getParameter("id");            int mediaId = -1;            Media media = null;            if(null!=idstr){                mediaId = Integer.parseInt(idstr);            }            try {                media = mediaDao.queryMediaById(mediaId);            } catch (Exception e) {                e.printStackTrace();            }            request.setAttribute("media", media);            request.getRequestDispatcher("media_player.jsp").forward(request, response);        }    }    }

可以通過(guò)分頁(yè)查找,顯示最新top5,展示到首頁(yè).相應(yīng)特效可以使用JS實(shí)現(xiàn).

相關(guān)代碼如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ page import="com.webapp.entity.*"%><%@ page import="java.util.*"%><%    String path = request.getContextPath();    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>視頻列表</title><link rel="stylesheet" type="text/CSS" href="skin/css/style.css" ></link><script type="text/Javascript" src="skin/js/jquery1.3.2.js"></script><script type="text/javascript">$(function() {    var sWidth = $("#focus").width(); //獲取焦點(diǎn)圖的寬度（顯示面積）    var len = $("#focus ul li").length; //獲取焦點(diǎn)圖個(gè)數(shù)    var index = 0;    var picTimer;        //以下代碼添加數(shù)字按鈕和按鈕后的半透明條，還有上一頁(yè)、下一頁(yè)兩個(gè)按鈕    var btn = "<div class='btnBg'></div><div class='btn'>";    for(var i=0; i < len; i++) {        btn += "<span></span>";    }    btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";    $("#focus").append(btn);    $("#focus .btnBg").css("opacity",0.5);    //為小按鈕添加鼠標(biāo)滑入事件，以顯示相應(yīng)的內(nèi)容    $("#focus .btn span").css("opacity",0.4).mouseenter(function() {        index = $("#focus .btn span").index(this);        showPics(index);    }).eq(0).trigger("mouseenter");    //上一頁(yè)、下一頁(yè)按鈕透明度處理    $("#focus .preNext").css("opacity",0.2).hover(function() {        $(this).stop(true,false).animate({"opacity":"0.5"},300);    },function() {        $(this).stop(true,false).animate({"opacity":"0.2"},300);    });    //上一頁(yè)按鈕    $("#focus .pre").click(function() {        index -= 1;        if(index == -1) {index = len - 1;}        showPics(index);    });    //下一頁(yè)按鈕    $("#focus .next").click(function() {        index += 1;        if(index == len) {index = 0;}        showPics(index);    });    //本例為左右滾動(dòng)，即所有l(wèi)i元素都是在同一排向左浮動(dòng)，所以這里需要計(jì)算出外圍ul元素的寬度    $("#focus ul").css("width",sWidth * (len));        //鼠標(biāo)滑上焦點(diǎn)圖時(shí)停止自動(dòng)播放，滑出時(shí)開(kāi)始自動(dòng)播放    $("#focus").hover(function() {        clearInterval(picTimer);    },function() {        picTimer = setInterval(function() {            showPics(index);            index++;            if(index == len) {index = 0;}        },4000); //此4000代表自動(dòng)播放的間隔，單位：毫秒    }).trigger("mouseleave");        //顯示圖片函數(shù)，根據(jù)接收的index值顯示相應(yīng)的內(nèi)容    function showPics(index) { //普通切換        var nowLeft = -index*sWidth; //根據(jù)index值計(jì)算ul元素的left值        $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通過(guò)animate()調(diào)整ul元素滾動(dòng)到計(jì)算出的position        //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //為當(dāng)前的按鈕切換到選中的效果        $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //為當(dāng)前的按鈕切換到選中的效果    }});</script></head><body><div class="wrapper">    <h1>最新視頻</h1>        <div id="focus">            <ul>                    <%                        List<Media> mediaList = (List<Media>)request.getAttribute("mediaList");                        if(mediaList.size()>0&&mediaList!=null){                            for(int i=0; i<mediaList.size(); i++){                                Media media = mediaList.get(i);                    %>                            <li><a href="play.action?id=<%=media.getId() %>"><img src="<%=basePath%><%=media.getPicture() %>" alt="" /></a></li>                                <%                             }                        }else{                    %>                        <li><h3 style="color:white;margin-left: 352px;margin-top: 130px;">沒(méi)有記錄</h3></li>                    <%                         }                     %>            </ul>        </div>                </div></body></html>

首頁(yè)展示的圖片都是帶ID的鏈接請(qǐng)求.圖片為視頻轉(zhuǎn)碼過(guò)程中拉取到的圖片.點(diǎn)擊圖片即可發(fā)送播放視頻請(qǐng)求,

視頻播放頁(yè)面效果如下圖所示.

視頻播放頁(yè)面需要在頁(yè)面中嵌入Flash播放器

代碼如下:

<!-- 嵌入Flash播放器 --><td align="center" width="455">    <object width="452" height="339" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">    <param name="movie"        value="<%=basePath%>tools/player.swf?fileName=<%=basePath%><%=media.getSrc()%>" />    <embed        src="<%=basePath%>tools/player.swf?fileName=<%=basePath%><%=media.getSrc()%>"        width="98%" height="90%"></embed>     </object></td>

相關(guān)說(shuō)明:

<object>元素,加載ActiveX控件,classid屬性則指定了瀏覽器使用的ActiveX空間.因?yàn)槭褂肍lash制作的播放器來(lái)播放視頻文件,所以classid的值必須為”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”

<param>元素,value屬性指定被加載的視頻文件.實(shí)例中用的是flash制作的視頻播放器.在value屬性值中向player.swf播放器傳遞了一個(gè)file參數(shù).該參數(shù)指定了要播放的視頻的路徑.

<embed>元素,src屬性也是用來(lái)加載影片,與<param>標(biāo)記的value屬性值具體相同的功能.