最近我的视频播放浅学总结

实现苹果同播共享功能：探索音视频同步方案

最新推荐文章于 2025-09-25 14:03:52 发布

原创

最新推荐文章于 2025-09-25 14:03:52 发布 · 499 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#音视频 #ffmpeg

作者在研究如何创建类似苹果同播共享功能时，探讨了hls.js、flv.js、dash.js和WebRTC等技术。最终选择了hls.js进行视频切片和播放，结合WebRTC处理操作同步，以实现低延迟且无需额外服务器的需求。在处理HEVCHDR视频时，遇到了解码问题，通过M2转码和SRS服务器实现了流畅播放。此外，还分享了JS面试题的资源。

因为想做一个类似苹果的同播共享功能，这一段时间对音视频做了一些浅浅的学习，现简单总结记录。

我的需求是找到一个尽可能简单的方案来两人播放一段视频，并且能够进度和操作同步，所以基本不能有延迟，同时能够显示WebVTT字幕，最好不需要额外的服务器。

视频流方案

前端视频流主要是用的是hls.js，flv.js和dash.js，我最后使用了hls.js。

hls.js

hls.js多用于做在线视频播放，原理就是将大视频切片，分成几秒一个的小片段，这样只需要不停加载小片段就可以完整播放视频了。

使用ffmpeg来生成视频

ffmpeg -i video.mkv -b:v:0 12M -c:v h264_videotoolbox -c:s webvtt -c:a mp3 -map 0:v -m

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蚂蚁二娘

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

H5播放HLS之hls.min.js库

lixiang987654321的专栏

09-21

8050

H5播放HLS之hls.min.js库视频推流H播放HLS 视频推流为了产生HLS视频，我们可以借助srs来实现rtmp推流并生成HLS流，具体详细使用可以参考我之前的文章，这里不再赘述。我们要实现web端播放传统的音视频，最重要的实现就是rtmp实时视频推送至srs集群，为了演示我这里只启动一个srs简单应用，重点放在web端播放相关技术的讲解，关于srs实时视频推送一块，我在《SRS直播集群方案》一文已经做了很详细的介绍，这里不再赘述。首先，我们可以使用ffmpeg或者obs采集本地视频并推送到s

hls.min.js脚本

07-08

基于MSE的HLS实现。 hls.js 是一个 JavaScript 库，实现了HTTP Live Streaming客户端，它依赖于HTML5 video标签和MediaSource Extensions。hls.js 是一个 JavaScript 库，实现了HTTP Live Streaming客户端，它依赖于HTML5 video标签和MediaSource Extensions。hls.js 是一个 JavaScript 库，实现了HTTP Live Streaming客户端，它依赖于HTML5 video标签和MediaSource Extensions。

参与评论您还未登录，请先登录后发表或查看评论

HLS.js：使用+讲解

最新发布

weixin_73077230的博客

09-25

1097

HLS.js通过使用Web标准，如HTML5 <video>元素和Media Source Extensions（MSE），使得HLS流可以在不支持原生HLS的浏览器上播放，包括早期版本的Chrome、Firefox、Edge以及其他基于Webkit的浏览器。然而，并非所有的浏览器都原生支持HLS，这正是HLS.js发挥作用的地方。通过调整HLS.js的缓冲参数，如levelTargetDuration和maxBufferLength，可以平衡缓冲时间和延迟之间的关系，以达到最佳的实时性和流畅度。

HLS.js：使用全解析

球球不吃虾WHR2349博客

08-15

1万+

HLS.js是一个轻量级的JavaScript库，旨在为不支持原生HLS的浏览器提供兼容性。它通过解析MPEG-TS流并在客户端进行解码，使HTML5元素能够播放HLS内容。HLS.js利用了现代浏览器中的Media Source Extensions (MSE) 和 Encrypted Media Extensions (EME) API来实现这一目标。

hls.js下载m3u8视频播放hls.js

fuxingsheng1的博客

11-30

8986

1.新建hls.min.js空文件 2.将下面内容复制到空文件中 !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Hls=e():t.Hls=e()}(this,function(){r

android h5 hls,H5播放HLS之hls.min.js库

weixin_34458671的博客

05-27

846

视频推流为了产生HLS视频，我们可以借助srs来实现rtmp推流并生成HLS流，具体详细使用可以参考我之前的文章，这里不再赘述。我们要实现web端播放传统的音视频，最重要的实现就是rtmp实时视频推送至srs集群，为了演示我这里只启动一个srs简单应用，重点放在web端播放相关技术的讲解，关于srs实时视频推送一块，我在《SRS直播集群方案》一文已经做了很详细的介绍，这里不再赘述。首先，我们可以使...

hls网页播放器实现

热门推荐

zhaozhen的博客

01-24

1万+

hls网页播放器实现 Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。本事记录内容只要是使用bootstrap的modal框实现点击按钮弹出视频框。播放的视频格式是hls(m3u8).video.js的详细使用方法可参考这里 1. 文件引入 <link hre...

hls.js

Eighteen Z

04-09

3906

hls协议的hls.js或者hls.min.js

11-01

hls.min.js vedio

09-26

hls.min.js 用于浏览器，uniapp视频拉流播放视频

一款用于在网页上播放视频的软件，本软件为开源软件，遵守开源协议：MIT

05-22

ckplayer是一款用于在网页端播放视频的软件，支持mp4点播，,flv点播和直播，m3u8的点播和直播，ts直播，支持移动端，PC端；视频格式支持（支持mp4,flv,m3u8,ts等格式）；播放形式支持（支持点播、直播、直播+回放）；平台支持（支持移动端，PC端）。功能支持（支持使用js监听播放器的各种状态，支持使用js控制播放器的各种操作）；软件架构（本软件采用javascript编写核心代码，css文件定义播放器风格）。

JS中Map和ForEach的区别

10-18

本篇文章给大家详细分析了JS中Map和ForEach的区别以及用法上的不同之处，对此有兴趣的朋友参考学习下吧。

videojs所需的JS工具

03-30

主要提供的是JS：videojs-contrib-hls.min.js、video.min.js、video.js、videojs-ie8.js、videojs-ie8.min.js 用于播放HLS流视频

解决HTML5 不能自动播放视频的问题

Williams山石的博客

05-19

1万+

有个需求，客户想做个打开官网自动播放一段视频，楼主使用了video标签，即下面的代码： &lt;div class='popup_video'&gt; &lt;video id="myVideo" style="z-index:-1" width="100%" -webkit-playsinline="true&a

videojs对hls直播和点播的支持m3u8

软件需要灵魂

06-15

2259

纠正大家对video.js支持hls使用方式的误区，已直接支持hls，完美支持加密m3u8

ffmpeg nginx flv_nginx, m3u8(HLS), video.js

weixin_39933336的博客

11-28

844

准备m3u8视频ffmpeg -i abc.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb abc.ts-i 视频文件-y 覆盖输出文件-vcodec codec 强制使用codec编解码方式。如果用copy表示原始编解码数据必须被拷贝。-acodec codec 使用codec编解码 -vbsf h264_mp4toannexb ...

探索HLS.js：Web端流媒体播放的技术利器

gitblog_00058的博客

03-19

1992

探索HLS.js：Web端流媒体播放的技术利器 hls.jsHLS.js is a JavaScript library that plays HLS in browsers with support for MSE.项目地址:https://gitcode.com/gh_mirrors/hl/hls.js 是一个开源JavaScript库，专门用于在Web浏览器上播放基于HTTP Live S...

Hls之Hls.js源码解析

12-09

9107

Hls协议后端开发工作，已经告一段落，开始正式进入前端web解码的研究。比较知名的是Hls.js的开源框架。最近主要工作就是研究其代码逻辑，以及框架结构，顺便学习一下js语法。目标：写一个适合自己使用的Hls解码的js库。在github上下载Hls.js的源码地址如下： https://github.com/video-dev/hls.js 工程打开截图： Hls库核心思想是...