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

Updated on in 程序人生 with 0 views and 0 comments

简介

这次遇到一个需要在前端播放视频的需求,视频一共五分钟,大小接近一个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>

标题:HTML播放基于HLS协议的流媒体视频
作者:wenyl
地址:http://www.wenyoulong.com/articles/2022/01/27/1643261958802.html