简介
这次遇到一个需要在前端播放视频的需求，视频一共五分钟，大小接近一个 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>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于