加载.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

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

相关推荐
炫饭第一名2 分钟前
🌍🌍🌍字节一面场景题:异步任务调度器
前端·javascript·面试
烛阴3 分钟前
Lua字符串的利刃:模式匹配的艺术与实践
前端·lua
奇舞精选4 分钟前
一文了解 Server-Sent Events (SSE):构建高效的服务器推送应用
前端
Yeats_Liao10 分钟前
Go Web 编程快速入门 11 - WebSocket实时通信:实时消息推送和双向通信
前端·后端·websocket·golang
纯爱掌门人15 分钟前
鸿蒙状态管理V2实战:从零构建MVVM架构的应用
前端·harmonyos
丘耳20 分钟前
vis-network 知识点笔记
前端·javascript
有点笨的蛋21 分钟前
重新理解 Flexbox:让布局回归“弹性”的本质
前端·css
小着22 分钟前
微信小程序组件中二维码生成问题解决方案
前端·微信小程序
潜心编码27 分钟前
基于Django的医疗电子仪器系统
前端·数据库·1024程序员节
摘星编程33 分钟前
深入 Actix-web 源码:解密 Rust Web 框架的高性能内核
开发语言·前端·rust·actixweb