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

本贴最后更新于 1183 天前,其中的信息可能已经东海扬尘

简介

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

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3200 引用 • 8216 回帖
1 操作
wenyl 在 2022-02-10 10:35:37 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...