加载.m3u8格式的音视频并定位到具体帧

使用场景:

  1. 审核管理平台,需要人工审核音频、视频,需要页面先加载出链接返回的音频、视频。资源对应的后缀都是.m3u8。
  2. 苹果TestFlight送审后,将iOS审核后台的资源拉取到内部系统展示。

处理方法hls

使用hls(# HTTP Live Streaming)技术处理。

Send live and on‐demand audio and video to iPhone, iPad, Mac, Apple Watch, Apple TV, and PC with HTTP Live Streaming (HLS) technology from Apple. Using the same protocol that powers the web, HLS lets you deploy content using ordinary web servers and content delivery networks. HLS is designed for reliability and dynamically adapts to network conditions by optimizing playback for the available speed of wired and wireless connections.

第三方库hls.js

github地址【github.com/video-dev/h...

使用文档地址【github.com/video-dev/h...

实际应用

音视频加载

js 复制代码
<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<script>
    useEffect(()=>{
        if (Hls.isSupported()) {
            var video = document.querySelector("#video_m3u8");
            var hls = new Hls();
            hls.on(Hls.Events.MEDIA_ATTACHED, function () {
              console.log('video and hls.js are now bound together !');
            });
            hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
              console.log(
                'manifest loaded, found ' + data.levels.length + ' quality level',
              );
            });
            hls.loadSource(url);
            // bind them together
            hls.attachMedia(video);
          }
 }, [url]); 
</script>

<div>
    <video src={url} className="video" controls id={`video_m3u8`}></video>
</div>

定位到具体帧数

使用video元素的属性 currentTime。该属性属于video的原生属性。

js 复制代码
// 通过输入视频具体的秒进行定位
                <Input
                    className="inputValue"
                    placeholder={'0.000 <=时间<= 30.000'}
                    value={time}
                    type="number"
                    change={value => {
                            document.querySelector("#video_m3u8").currentTime = value;
                        }
                    }}
                />

通过修改毫秒数可以定位到具体的帧。

毫秒和帧数的换算

首先根据视频的属性确定视频的fps。即1s内当前视频的帧数--每秒传输帧数(Frames Per Second)

1s = 1000ms。如果当前视频属性为nfps。 则一帧对应的ms数为 1000/n。 则根据对应的换算关系,可以定位到具体的帧数。

计算视频的fps

  1. 第一种方法使用 requestVideoFrameCallback()方法。
  2. 第二种方法使用 mediainfo.js

因为实际情况中未运用到该情况,所以该方法待验证

相关推荐
IT_陈寒几秒前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start18 分钟前
前端基础一、HTML5
前端·html·html5
鬼谷中妖27 分钟前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A31 分钟前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER33 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父37 分钟前
前端速通—CSS篇
前端·css
pixle040 分钟前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH1 小时前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童1 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源