Java实现视频在线播放flv视频

1、首先使用Idea创建一个Spring Boot项目。

2、在application.properties文件下加入以下代码，进行DEBUG日志输出，配置pom.xml文件：

#logging日志配置
logging.level.root=WARN
logging.level.org.springframework.web=DEBUG

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>demo</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.2.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.31</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>


</project>

3、在resources/static文件夹下加入jquery-3.3.1.min.js和flvplayer.swf文件，当项目启动后，可以直接访问static文件下文件，例如http://localhost:8080/jquery-3.3.1.min.js可直接访问jquery文件。flvplayer.swf是播放flv格式视频的插件，在这先不详细介绍。

flvplayer.swf下载链接：https://files.cnblogs.com/files/zhazhadequshi/flvplayer.swf

jquery下载链接：https://files.cnblogs.com/files/zhazhadequshi/jquery-3.3.1.min.js

4、创建一个视频目录html页面：

因为项目采用前后端分离方案，不经过spring mvc转换访问页面，有兴趣的了解spring mvc的请看https://www.yiibai.com/spring_mvc/。

在<body>标签内加onload表示当页面加载时会自动调用js方法。

getPath（）方法请求向后台获取所有的视频目录，ajax是异步请求，可将获取的数据添加到已有的html页面中，$("#view")为div的id，

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<!DCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video menu</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<script>
    function getPath() {
        $.ajax({
            url:"http://localhost:8080/VideoPath",
            type:"get",
            success:function(path) {
                $("#view").append("<table>");
                var JsonPath = JSON.parse(path);
                for(i=0;i<JsonPath.length;i++){
                    $("#view").append("<tr><td><a target='_blank' href='videoPlay.html?param="+JsonPath[i]+"'>"+JsonPath[i]+"</a></td></tr>");
                }
                $("#view").append("</table>");
            }
        })
    }
</script>
<body onload="getPath()">
<div id="view"></div>
</body>
</html>

5、创建视频播放页面：

参数设置

vcastr_file 方法2传递影片flv文件地址参数，多个使用|分开空
vcastr_title 影片标题参数，多个使用|分开，与方法2配合使用空
vcastr_xml 方法3 传递影片flv文件地址参数，样板参考 vcastr.xml
IsAutoPlay 影片自动播放参数：0表示不自动播放，1表示自动播放 0
IsContinue 影片连续播放参数：0表示不连续播放，1表示连续循环播 1
IsRandom 影片随机播放参数：0表示不随机播放，1表示随机播放 0
DefaultVolume 默认音量参数：0-100 的数值，设置影片开始默认音量大小 100
BarPosition 控制栏位置参数：0表示在影片上浮动显示，1表示在影片下方显示 0
IsShowBar 控制栏显示参数：0表示不显示；1表示一直显示；2表示鼠标悬停时显示；3表示开始不显示，鼠标悬停后显示 2
BarColor 播放控制栏颜色，颜色都以0x开始16进制数字表示 0×000033
BarTransparent 播放控制栏透明度 60
GlowColor 按键图标颜色，颜色都以0x开始16进制数字表示 0x66ff00
IconColor 鼠标悬停时光晕颜色，颜色都以0x开始16进制数字表示 0xFFFFFF
TextColor 播放器文字颜色，颜色都以0x开始16进制数字表示 0xFFFFFF
LogoText 可以添加自己网站名称等信息(英文) 空
LogoUrl 可以从外部读取logo图片，注意自己调整logo大小，支持图片格式和swf格式空
EndSwf 影片播放结束后,从外部读取swf文件，可以添加相关影片信息，影片分享等信息，需自己制作空
BeginSwf 影片开始播放之前,从外部读取swf文件，可以添加广告，或者网站信息，需自己制作空
IsShowTime 是否显示时间 : 0表示不显示时间，1表示显示时间 1
BufferTime 影片缓冲时间，单位（秒） 2

<!DOCTYPE html>
<html>
<head>
    <title>video view</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body onload="load()">
<script type="text/javascript">
    function getParams(key) {
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    };
    function load(){
        var txt = "<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0\" width=\"500\" height=\"400\">\n" +
            "    <param name=\"movie\" value=\"http://yourname.com/flvplayer.swf\" />\n" +
            "    <param name=\"quality\" value=\"high\" />\n" +
            "    <param name=\"allowFullScreen\" value=\"true\" />\n" +
            "    <embed src=\"flvplayer.swf\" allowfullscreen=\"true\" flashvars=\"vcastr_file=videoDownload/"+getParams("param")+"&IsAutoPlay=1\" quality=\"high\" type=\"application/x-shockwave-flash\" width=\"960\" height=\"540\"></embed>\n" +
            "</object>"
        $("#object").append(txt)
    }
    console.log("参数param1:"+getParams("param"));//输出aa
</script>
<div id="object"></div>
</body>
</html>

6、创建枚举类，存储视频文件目录：

public enum  VideoPath {
    //存储地址以及代号
    ONE(1,"C:\\Users\\yebing\\Desktop\\video1\\"),
    TWO(2,"C:\\Users\\yebing\\Desktop\\video2\\"),
    THREE(3,"C:\\Users\\yebing\\Desktop\\video3\\");
    private int num;
    private String name;
    private VideoPath(int num, String name){
        this.num = num;
        this.name = name;
    }

    public int getNum() {
        return num;
    }

    public void setNum(int num) {
        this.num = num;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

7、创建获取视频目录控制器：

@RestController等同于@ResponseBody+@Controller，JSONObject为阿里fastjson包转换json的方法。

import com.alibaba.fastjson.JSONObject;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.io.File;

@RestController
public class RequireVideoPath {
    /**
     * 获取文件夹下所有文件
     * @return
     */
    @GetMapping("/VideoPath")
    public static String requireVideoPath(){
        String path = null;
        String[] paths = null;
        //使用枚举代替常量
        File rootFile = new File(VideoPath.ONE.getName());
        File[] files = rootFile.listFiles();
        paths = new String[files.length];
        for(int i =0;i<files.length;i++){
            File childrenFile = files[i];
            System.out.println(childrenFile.getPath());
            paths[i] = childrenFile.getName();
        }
        System.out.println(JSONObject.toJSONString(paths));
        path = JSONObject.toJSONString(paths);
        return path;
    }
    public static void main(String[] args){
        requireVideoPath();
    }
}

8、创建视频播放类：

从httpServletResponse中获取servletOutputStream输出流，同时使用NIO流进行流的传输，最后千万记得关闭流，不然会导致内存泄漏等问题，保持这个好习惯。

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.channels.FileChannel;

@Controller
public class VideoDownload {
    @GetMapping("/videoDownload/{id}")
    public void fileDownload(@PathVariable("id") String id, HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) {
        //响应文件流准备
        File file = new File(VideoPath.ONE.getName()+id);
        FileInputStream fileInputStream = null;
        //response响应输出流
        ServletOutputStream servletOutputStream = null;
        //响应Http信息头准备
        httpServletResponse.addHeader("Content-Disposition", "attachment;filename=\""+file.getName()+"\"");
        httpServletResponse.addHeader("Content-Length",file.length()+"");
        httpServletResponse.setContentType("application/octet-stream");
        try{
            //输出流信息准备
            servletOutputStream = httpServletResponse.getOutputStream();
            //文件流准备，打开NIO流管道
            fileInputStream = new FileInputStream(file);
            //调用方法
            servletOutput(fileInputStream, servletOutputStream);
        }catch (Exception e){
            System.out.println("servletOutputStream异常！");
        }finally{
            try {
                servletOutputStream.close();
                fileInputStream.close();
            } catch (IOException e) {
                System.out.println("文件流关闭异常！");
            }
        }
    }

    public void servletOutput(FileInputStream fileInputStream, ServletOutputStream servletOutputStream){
        FileChannel fileChannel = fileInputStream.getChannel();
        try {
            ByteBuffer byteBuffer = ByteBuffer.allocate(1024*1024);
            byte[] bytes = new byte[1024*1024];
            int i = fileChannel.read(byteBuffer);
            byteBuffer.flip();
            while(i!=-1){
                //如果缓冲区剩下字节数不足1024*1024个字节，则重新创建数组对象
                if(byteBuffer.remaining()!=1024*1024){
                    bytes = new byte[byteBuffer.remaining()];
                }
                byteBuffer.get(bytes);
                servletOutputStream.write(bytes);
                byteBuffer.clear();
                i = fileChannel.read(byteBuffer);
                byteBuffer.flip();
            }
            servletOutputStream.flush();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

总结：

项目视频播放必须使用flv格式，这个是现代视频播放普遍使用的一种格式，flvplayer.swf插件可以网上下载用于前端播放flv格式视频。

前后端使用jquery的ajax实现前后端分离，可实现局部的刷新无需重新加载页面。

posted @ 2018-06-03 14:17 喳喳的趣事阅读(5483) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

喳喳的趣事

Java实现视频在线播放flv视频

参数设置

公告