网站首页 > 知识剖析 正文
上次我们聊 B 站视频为什么播放那么快是利用了视频分片技术,提前将视频分成很多小片,这样就可以实现播放的时候只加载播放位置的视频,只需要加载那一小段就可以了。
这样就可以达到快速播放的目的了。那么我没你拿到视频片段,怎么播放呢?
今天就来研究下。
浏览器的 SourceBuffer 的 API
首先,浏览器本身有一个叫做 SourceBuffer 的 API。我们去看他的官方文档解释。
SourceBuffer 接口标识通过 MediaSource 对象传递到 HTMLMediaElement 并播放的媒体分块。它可以由一个或者多个媒体片段组成。
这样在用的时候,我们把视频的地址,传入到这个媒体对象中去。
这样等到视频一部分一部分下载好之后,就可以直接拼接上去。因为这个媒体对象有个 appendBuffer 方法。
sourceBuffer.appendBuffer(buf);
看代码是否有SoufceBuffer这个对象
我们直接在控制台搜索代码,果然有这个对象。
基本可以断定,b 站就是通过这个对象来实现网页的视频播放的。
服务端怎么存储视频片段
我们网页下载这些视频片段,那么服务器段就要存,所以服务器要先把视频以某个格式存储好,一个一个片段文件。这样就可以一部分一部分下载。
看b 站使用一种叫 m4s 的格式存储的。
猜你喜欢
- 2024-12-30 Dreamweaver CC 网页制作:插入视频
- 2024-12-30 VIVox6手机看电视黑屏了肿么调 vivo手机看视频黑屏怎么回事
- 2024-12-30 告别U盘,远程传送,手机、电脑视频电视轻松看!
- 2024-12-30 QLab Pro for Mac(现场舞台演出控制工具)
- 2024-12-30 视频解析需要这几个网站 视频解析网站是什么
- 2024-12-30 Python Flask如何实播放视频流?深入浅出实现方案
- 2024-12-30 WebRTC实现浏览器上的音视频通信 webrtc视频流传输
- 2024-12-30 功能强大的音视频播放软件 好用的音频播放器app
- 2024-12-30 怎么制作宣传片视频 怎么制作宣传短片
- 2024-12-30 Word文档里能插入在线视频,这个隐藏功能你知道吗?
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)