b站视频是如何播放的(b站视频怎么播放)

yumo6662个月前 (05-02)技术文章13

上次我们聊 B 站视频为什么播放那么快是利用了视频分片技术,提前将视频分成很多小片,这样就可以实现播放的时候只加载播放位置的视频,只需要加载那一小段就可以了。

这样就可以达到快速播放的目的了。那么我没你拿到视频片段,怎么播放呢?

今天就来研究下。

浏览器的 SourceBuffer 的 API

首先,浏览器本身有一个叫做 SourceBuffer 的 API。我们去看他的官方文档解释。

SourceBuffer 接口标识通过 MediaSource 对象传递到 HTMLMediaElement 并播放的媒体分块。它可以由一个或者多个媒体片段组成。

这样在用的时候,我们把视频的地址,传入到这个媒体对象中去。

这样等到视频一部分一部分下载好之后,就可以直接拼接上去。因为这个媒体对象有个 appendBuffer 方法。

 sourceBuffer.appendBuffer(buf);

看代码是否有SoufceBuffer这个对象

我们直接在控制台搜索代码,果然有这个对象。

基本可以断定,b 站就是通过这个对象来实现网页的视频播放的。

服务端怎么存储视频片段

我们网页下载这些视频片段,那么服务器段就要存,所以服务器要先把视频以某个格式存储好,一个一个片段文件。这样就可以一部分一部分下载。

看b 站使用一种叫 m4s 的格式存储的。

相关文章

在平板电脑上使用Chrome观看视频的最佳技巧

平板电脑由于其便携性和较大的屏幕尺寸,成为了许多人观看视频的理想选择。配合功能强大的谷歌Chrome浏览器,你的视频观看体验可以更上一层楼。下面将分享一些在平板电脑上使用Chrome观看视频时的技巧。...

手把手教你用 Spring Boot+FFmpeg 实现 RTSP 视频流播放

你是否在互联网大厂的后端开发工作中,遇到过这样的难题?项目需要实现实时视频推流服务,并且要支持 RTSP 视频流的播放,但尝试了多种方法都效果不佳,不仅效率低,还频频出现兼容性问题,让开发进度严重受阻...

C# 开发超级视频播放器VLC代码开源

自主采用C# 开发视频播放器,效果如下;VLC多媒体播放器(最初命名为VideoLAN客户端)是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影...

HTML5中video标签如何使用(h5的video标签)

HTML5中的video标签用于播放视频文件的,在video标签中我们可以设置窗口的宽高,视频的自动播放,循环播放以及视频的封面图片等等HTML5是下一代HTML,新增了许多新的标签,这些标签实现了许...

科研笔记神器:一边视频,一边笔记,轻松搞定B站视频学习

上一期,笔者介绍了一款笔记神器——Obsidian,它可以用于思维导图和知识管理。高效阅读和写作,席卷科研圈的科研神器由于计算机、互联网技术的发展,线上学习、视频学习已经成为了一种流行的学习途径,边看...

Python Flask如何实播放视频流?深入浅出实现方案

本文致力于流式传输,这是一个有趣的功能,它使Flask应用程序能够长时间有效地将大型响应有效地分成小块。为了说明这一主题,我将向您展示如何构建实时视频流服务器!注意:本文有后续内容,Flask视频流再...