HTML 播放基于 HLS 协议的流媒体视频

简介

这次遇到一个需要在前端播放视频的需求，视频一共五分钟，大小接近一个 G，由于视频过大，不能直接放在网页上显示，因此将这个视频转换为视频流，前端再用 video 组件播放视频。

MOV 视频转换 MP4

** 引入 maven 依赖**

<dependency>
    <groupId>ws.schild</groupId>
    <artifactId>jave-all-deps</artifactId>
    <version>3.0.1</version>
</dependency>

转换代码

@Test
public void testMovToMp4(){
    File source = new File("D:\\source.mov");
    File target = new File("D:\\target.mp4");
    try {

        AudioAttributes audio = new AudioAttributes();
        audio.setCodec("libmp3lame");
        audio.setBitRate(new Integer(800000));//设置比特率
        audio.setChannels(new Integer(1));//设置音频通道数
        audio.setSamplingRate(new Integer(44100));//设置采样率

        VideoAttributes video = new VideoAttributes();
        video.setCodec("libx264");
        video.setBitRate(new Integer(3200000)); // 比特率值
        video.setFrameRate(new Integer(120));// 视频帧率

        EncodingAttributes attrs = new EncodingAttributes();
        attrs.setOutputFormat("mp4");
        attrs.setAudioAttributes(audio);
        attrs.setVideoAttributes(video);
        Encoder encoder = new Encoder();
        encoder.encode(new MultimediaObject(source), target, attrs);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

这样就可以将 mov 转换成 mp4 文件

HLS 流媒体视频生成

下载 ffmpeg，地址为http://ffmpeg.org/download.html#build-windows

进入 bin 目录执行

ffmpeg -i D:\target.mp4 -profile:v baseline -r 120 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls D:\m3u8\target.m3u8

然后就会生成.m3u8 文件和一堆.ts 文件

HTML 播放视频

编写好代码，直接访问存在跨域问题，将这个页面放到 nginx 目录下即可

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
<body>
    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" width="980" height="500" controls preload="auto" data-setup='{}'>  
        <source id="source" src="./video/云天化现代农业第四稿.m3u8"  type="application/x-mpegURL">
    </video>
</body>
<script>  
    var myVideo = videojs('myVideo',{
        bigPlayButton : true, 
        textTrackDisplay : false, 
        posterImage: false,
        errorDisplay : false,
    });
    myVideo.play();
    myVideo.pause();
</script>
</html>

Java 模块化与接口组成（十六）

[图片] 模块化模块的基本使用模块的使用步骤创建模块在模块的 src 目录下新建一个名为 module-info.java 的描述文件，该文件专门定义模块名，访问权限，模块依赖等信息描述性文件中使用模块导出和模块依赖来进行配置使用模块中所有未导出的包都是模块私有的，不能在模块之外被访问模块导出格式：exp ..

Java 反射（十五）

[图片] 反射类加载器概述当程序要使用某个类时，如果该类还未被加载到内存中，则系统会通过类的加载，类的连接，类的初始化这三个步骤来对类进行初始化，如果不出现意外情况，JVM 将会连续完成这三个步骤，所以有时也把这三个步骤统称为类加载或者类初始化。类加载就是指将 class 文件读入内存，并为之创建一个 jav ..

Java Stream 流（十四）

[图片] Stream 流概述 Stream 流的使用生成流通过数据源（集合，数组等）生成流 list.stream() 中间操作一个流后面可以跟随零个或多个中间操作，其目的主要是打开流，做出某种程度的数据过滤/映射，然后返回一个新的流，交给下一个操作使用 filter() 终结操作一个流只能有一个终结操作， ..

Java 函数式接口（十三）

[图片] 函数式接口概述函数式接口：有且仅有一个抽象方法的接口 Java 中的函数式编程体现就是 Lambda 表达式，所以函数式接口就是可以适合于 Lambda 使用的接口只有确保接口中有且仅有一个抽象方法，Java 中的 Lambda 才能顺利地进行推导 @FunctionalInterface ：函数式接口 ..

Java 方法引用（十二）

[图片] 方法引用方法引用符 :: 该符号为引用运算符，而它所在的表达式被称为方法引用范例： // Inter为接口，InterDemo为测试类 public interface Inter{ void run(String s); } public class InterDemo{ public static v ..

Java Lambda 表达式（十一）

[图片] Lambda 表达式 Lambda 表达式的标准格式格式：(形式参数) -> {代码块} 形式参数：如果有多个参数，参数之间用逗号隔开；如果没有参数，则留空 -> ：由英文中划线和大于符号组成，固定写法。代表指向动作代码块：是具体要做的事情，即方法体内容 Lambda 表达式的使用前提有一个 ..

Java 网络编程（十）

[图片] 网络编程网络编程入门概述在网络通信协议下，实现网络互连的不同计算机上运行的程序间可以进行数据交换网络编程三要素 IP 地址实现计算机的互相通信，必须为每台就是就是指定一个标识号，通过这个标识号来指定要接收数据的计算机和识别发送的计算机，而 IP 地址就是计算机的标识号，也就是设备的标识。端口端口 ..

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

关于