整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

一个开源的HTML5流媒体播放器

一个开源的HTML5流媒体播放器

开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的HTML5流媒体播放器——PearPlayer.js。

PearPlayer是完全用JavaScript写的开源HTML5流媒体播放框架,实现了融合HTTP(含HTTPS、HTTP2)和WebRTC的多协议、多源、低延迟、高带宽利用率的无插件Web客户端流媒体加速能力。基于H5的MSE(Media Source Extension)技术将来自多个源节点的Buffer分块喂给播放器,再加上精心设计的算法可实现最优的调度策略及对各种异常情况的处理,PearPlayer由此能在保证用户流畅视频体验的前提下最大化P2P率。

PearPlayer特性

  • P2P能力基于WebRTC,无须安装任何插件
  • 多协议(HTTP、HTTPS、WebRTC)、多源
  • 自研的调度算法,在保证用户流畅视频体验的前提下最大化P2P率
  • 默认无需填参数(内部根据视频码率等作自适应),高级使用模式下可自行调整算法和参数
  • 默认不会无限制缓冲,尽可能为CP用户节省带宽/流量
  • 支持Chrome、Firefox、Opera、IE、Edge等主流浏览器,即将支持Safari、腾讯微信、X5/TBS(可多源传输,播放问题待不久后由MSE支持完善)
  • 可选接入低成本、高可用的Pear Fog CDN
  • 协议默认通过TLS/DTLS全加密,无DPI特征;并可通过Pear Fog组件的动态端口映射进一步消除统计学特征
  • 像使用HTML5 <video>标签一样简单,并易与video.js等流行播放框架集成
  • 具备Browser P2P能力(基于WebTorrent)

使用方法

首先通过script标签导入pear-player.min.js:

<script src="./dist/pear-player.min.js"></script>

或者使用CDN:

<script src="https://cdn.jsdelivr.net/npm/pearplayer@latest"></script>

假设用video标签播放以下视频,HTML如下:

<video id="pearvideo" src="https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4" controls>

只需以下几行代码,即可将PearPlayer绑定到video标签:

<script>

/**

* 第一个参数为video标签的id或class

* opts是可选的参数配置

*/

if (PearPlayer.isMSESupported()) {

var player=new PearPlayer('#pearvideo', opts);

}

</script>

至此,就已经添加播放器了,无需任何插件。


开源地址:https://gitee.com/PearInc/PearPlayer.js

CSDN 编者按】这是一篇由 Ryan Carniato 于2023年12月29日发表的关于「2024年JavaScript 框架发展趋势」的文章。作者认为 2023 年是 JavaScript 框架发展的重要一年,预计 2024 年将继续看到更大的变化,其中包括服务器优先、混合路由、边缘网络和人工智能等方面的发展。此外,2024年可能会继续加强框架的成熟化趋势。作者对于简化方案,如 Astro 和 HTMX,仍然持乐观态度,并期待框架能够更好地履行其承诺,专注于提供更有力的解决方案,减少复杂性。


作者 | Ryan Carniato 责编 | 梦依丹
出品 | CSDN(ID:CSDNnews)

岁末年初,恰逢年度总结时刻。不少开发者也在积极参加 CSDN 举行的年度征文活动——2023年,我的编程之旅。晒出自己过去一年的技术成就与所在领域的技术变化,GET 到的新功能、新技术等。

近日,知名前端爱好者,SolidJS UI 库作者,同时也是 MarkoJS 核心团队的成员 Ryan Carniato 撰写了《进入2024 的 JavaScript 框架,本文总结了 JavaScript 框架在 2023 年的技术趋势与 2024 年的预期变化。

以下为译文:

对于 JavaScript 框架来说,2023 年是相当重要的一年。新技术终于展示出了它们的实用性,而旧框架也在卷土重来。如果你没注意到的话,可能就错过了一个相当重大的转变。
我预计,2024 年将继续带来更大的变化。这一次的重点不再是新技术,而是对现有技术的改进和完善。基础已经打下,我们有更多的内容可以实现和呈现给用户。

服务器优先(Server First)
如果要为过去几年选择一个主题,那就是"服务器优先"。这个观点一直备受争议,但无可否认。短短几年前,人们都在谈论渐进式 Web 应用和离线优先的概念。但是,这种讨论几乎销声匿迹。

https://twitter.com/htmx_org/status/1725241732260847914
相反,HTMX 以其犀利的观点,解释了为什么 JavaScript 是一个错误。Astro 也毫不掩饰地接管了内容站点开发。甚至 React 核心团队也接受了服务器的简洁性,正如 Dan Abramov 在演讲中所强有力表达的那样,他探讨了如果 React 一直以服务器为优先会怎样。
那么,我们曾经钟爱的单页面应用(Single Page App)在这么短的时间里经历了什么?它现在是否还存在,我们现在是生活在多页面应用(Multi-Page App)和只有服务器渲染的 HTML 时代吗?

回顾 2023
去年,我也写了一篇类似的文章,探讨 JavaScript 框架的发展趋势。那篇文章所提到的三大技术趋势成了过去一年讨论的重点。
无处不在的 Signals
自从 SolidJS 和 Vue 开始采用反应性原语之后,Preact 和 Qwik 紧随其后,这种趋势在 2023 年变得更加强劲。

https://github.com/angular/angular/discussions/49090

在二月,Angular 团队也宣布采用了这一技术。该消息在社交媒体上引起了很大的轰动。不仅如此,这也是导致 Angular 引起重大关注的几个因素之一。有人甚至称之为 Angular 的复兴。而且,这是过去几年来 React 团队首次加入了这场争论,因为人们开始纷纷问道:“React 何时会采用 Signal 呢?”
关于这个问题,我在下面的文章中写了更详细的回答(还附有与 Dan Abramov 在中评论的讨论)。
不过,简单来说,React 团队对 Signal 这种 API 并不太感兴趣,他们更期待的是「Forget」编译器,因为它能起到类似的作用。当然,Signal 的应用并没有到此结束。谷歌的 Web 组件框架 Lit 发布了原生支持信号的 Lit 3。Rich Harris 则透露了 Svelte 的未来发展方向,他们基于 Signal 的新「Runes」将成为即将发布的 Svelte 5 中主要的响应式来源。到 2023 年底,Signal 已经成为大多数前端 JavaScript 框架的重要组成部分。
混合路由

服务器端路由在过去一年中变得越来越重要。从 2022 年底开始,这种模式逐渐被人们所接受,比如使用 React Server Components 和 Astro 的 View Transition API 集成。
它的基本原则是,在初始页面加载后,服务器端的渲染不应影响客户端的导航,而客户端的导航也不应意味着我们需要发送所有的 JavaScript 来渲染那些可以在服务器端静态渲染的页面部分。
需要注意的是,不同的解决方案产生的效果也不同,这一领域仍在发展之中。我们正在进入一个全新的领域,它既不是传统的单页应用程序,也不是传统的多页站点。我们需要了解新的权衡和概念。而且,我们还远没有解决所有的问题。
边缘网络:最后的前沿

边缘函数似乎是显而易见的成功案例之一。将服务器靠近最终用户来大大减少延迟。使用更轻量级的运行时,可以大大减少冷启动时间。
如果说 2023 年有什么不同的话,那就是边缘技术发展的一年。我们一开始非常热情。毕竟,Cloudflare 发布了边缘数据库,我们所有喜欢的提供商都开始提供边缘函数,我们最喜欢的框架也添加了开箱即用的支持。供应商已经成立了一个名为 WinterCG 的委员会,来讨论平台的标准化问题。未来就在眼前。


我们最终意识到,即使在这些边缘函数中,某些 Node API 也是必不可少的。你可以感谢或讨厌 Next 和 Vercel 将 AsyncLocalStorage 推广到每个运行时,但我们需要它。
我们还意识到,边缘数据库对于所有应用程序来说永远是不够的。即使有流媒体,服务器水瀑仍然真实存在且影响很大。是的,即使使用 React Server Components 也是如此。但这确实推进了我去年提出的目标,即使用分布式部署进行整体创作。我们看到服务器函数(server$,使用 server)甚至像工作器函数这样的变体在年初就出现了,表明我们可以分布我们部署 API 的方式,被 Solid、Qwik 和 Next 采用。
到年底,Next 14 发布了新的实验性部分预渲染,允许单个请求从边缘提供静态内容,同时通过代理到更靠近数据库的无服务器函数,所有内容都被流式传输,以提供类似于边缘的体验,而无需在那里部署整个应用程序。看到一些独创性提供了两全其美的解决方案,真是令人敬畏。

https://twitter.com/rickhanlonii/status/1722704383064842280


2024 年的趋势
Signals 的年代
我已经讲了很多关于 Signals 的内容,但真正的好处还没有显现出来。JavaScript 中已经有了类似 Signals 的细粒度原始函数 15 年了,那为什么是现在呢?

https://twitter.com/t3dotgg/status/1730711700805140908


预计 JavaScript 框架将进一步整合 Signal 机制,例如 Vue Vapor 和 Svelte 5 中的新反应性模型。
基础实施驱动开发
既然服务器端渲染框架已经得到了很大的支持,那么下一个合理的发展方向就是继续探索如何最大限度地发挥这种新功能的作用。标准的制定比较慢,WinterCG 也需要一些时间,但这并不会阻止发展的势头。
为了实现差异化,我预计框架和基础设施提供商将面临提供独特功能的压力,而这些功能可能仅在特定平台上可用。虽然 2023 年看到了各提供商在提供类似功能方面的平等化趋势,例如在基本静态和函数托管之外提供键值存储 Blob 等功能,但我认为在提供独特价值方面的竞争将会加剧。
框架的作用是保持一致的创作体验和思维模型,同时寻找利用新功能的方法。这与 21 世纪初的浏览器大战类似,未来还有很多发展空间。
AI
去年,从框架的角度来看,谈论人工智能还为时尚早。明年可能也是如此。但它已经渐渐出现在我们的视野中。代码迁移和生成工具都是很好的想法,但它们与多年来使用的可视化无代码或低代码编辑器面临着同样的问题。人与机器的交互界面仍然至关重要。毕竟,代码是一个活生生的存在。它随着时间的推移不断生长和维护。
在过去的一年里,与其他框架的作者交流时,我们发现人工智能引起了周围人的极大兴趣。

https://twitter.com/aidenybai/status/1737616282210738650

人工智能正在回答一个长久以来的问题,那就是为什么你的应用程序运行缓慢。

对开发工具的影响只是其中一方面。我们还越来越多地看到实时性能被融入到框架中。这不仅指的是用于持久化后端的 Websockets。元框架中的 API 已经发展到超越简单的 JSON,实现了完全流式的跨网络 JavaScript 执行,这在 SolidStart、Qwik 和 Next 中通过“服务器函数”实现。现在,我们可以很容易地想象出生成技术实时创建你的用户界面的情景。

https://twitter.com/mhevery/status/1722928972789408240

总结
2024 年可能会延续我们在过去几年看到的成熟趋势。从 2020 年到 22 年,我们看到了很多新的 JavaScript(和 WASM)框架(Qwik、Million.js、Astro、Next 13、Remix、Hydrogen、SvelteKit、SolidStart、Leptos、Dioxus、HTMX),但去年的情况发生了改变。不再出现大量新的 JavaScript 框架,相比之下相对较少。然而,我们已经找到了解决问题的方法和途径。现在的关键是要充分发挥这些方法和途径的潜力,将它们应用到实际开发中,取得更好的效果。
我不确定我们是否已经成功地解决了复杂性问题,这给像 Astro 或 HTMX 这样简化的解决方案带来了很大的肯定。但我仍然充满希望。
也许不太可能期望每个人都对“单页应用程序”的确切定义以及何时使用各种选项达成一致,但这些解决方案每天都变得更加强大,能够实现它们既定的目标。
现在不再怀疑我们熟悉的Web开发将发生变化。即使方向还不完全明确,革命已经来临。期待与你一同见证这一变革。

览在线网站的体验并不总是流畅的。


曾经有一段时间,你在网上冲浪时,可能会听到你不愿意听的音乐,并在配色奇怪的网页上浏览用呆板字体(通常是 Times New Roman)写成的文字。


在 2000 年代,在 Squarespace 和社交媒体出现之前,网站是个性的体现,完全由对代码有一定了解并渴望上网的用户使用 HTML 从零开始构建。


现在,分散在网络上的程序员社区,正在努力恢复这种看似过时的东西。这场运动来源于艺术家劳蕾尔·施伍斯特(Laurel Schwulst)和埃利奥特·科斯特(Elliott Cost)创造的“HTML 能量”概念,绝不是对复古美学的肤浅致敬。


它专注于 HTML 编码的“触觉”过程,探索语言如何实现自我表达,并使个人能够在互联网中占据一席之地。


HTML 能量运动在小型 Discord 频道和数字杂志等领域形成,旨在庆祝数字体验中的“人性触摸”。


(来源:AI 生成)


如今,大多数互联网都针对社交、电子商务和流媒体进行了优化。大多数互联网流量集中在少数几个网站上,这些网站又都归少数几家公司所有。从冗长的广告到咄咄逼人的 cookie 设置,一些小障碍和麻烦层出不穷。


用户不断被提醒,他们访问互联网的条件是让少数人从中获利。X(原推特)的情况完美地概括了互联网所有权的这种状态,只需要一位高管就可以引发大量用户逃离该平台,并将其长期存在的社区割裂开来。


然而,尽管大型科技公司垄断了市场,但一个基本现实仍然能够证明互联网的民主:任何人都可以用 HTML 免费发布网站。


从技术上讲,互联网为每个人都提供了空间,因此不存在无处容身的问题。真正的问题是流量。


当我与 HTML 能量社区的不同成员交谈时,所有人都一致地传达着一个基本信息:网络上的一切最终都是 HTML。HTML 是任何网站的主干。


这是网站运行所需的唯一东西。虽然当今流行的 web 开发语言使用 abridged 命令,通过所谓的数据抽象来隐藏技术复杂性,但 HTML 是细粒度的,编程经验也不是先决条件。


正如科斯特所解释的,正是 HTML 的包容性给了渴望在网络上发布自我的人机会。使用 HTML,即使缺少一行代码,网站仍将加载。HTML 能量运动包含了这些可能性:欢迎通过试错学习,鼓励创造性实验。


随着主流数字体验趋向于同质的视觉语言,人类的触觉在许多抽象层中迷失了。网站创建者离他们的网站越来越远,网络也变得更具交易性。


但 HTML 能量运动呼吁人们重新审视我们与技术的关系,使用 HTML 制作网站可以让程序员探索网站的本质。


与公司不同,人们自己创建网站无需向股东负责。他们没有创造有利可图的体验的压力,所以他们的创作可以采取各种各样的形式。


常见类型的 HTML 能量网站包括数字花园,其中的元素随着季节的变化而变化;交互式诗歌生成器,用户的输入会创造新的意义;以及分享创作者生活细节的个人网站。


在一个消费主义至上的互联网中,HTML 能量的网站温和地提醒人们,网站可以带来冥想一样的体验。


HTML 能量社区提倡理解 HTML 的字面含义,它就是一种语言。它赞美了这种语言的基本特征对用户意图的要求。


作为微小和复杂创意决策的融合,仅使用 HTML 构建的网站是一种自我表达形式。


查看网站的源代码与浏览界面一样重要。代码中经常隐藏着彩蛋,比如来自其他 HTML 网站的消息或引用。


在很多方面,HTML 网站都“记录着”创作者的身份:这个人选择了构建什么?如何构建?


这种对 HTML 不同应用的迷恋,也出现在被称为“freewrites”的物理社区聚会中,社区成员常聚在一起编写代码。


Sunday Sites 和 Fruitful School 是组织这些集会的网站之一,它们经常将教育元素融入活动中,以增强更多人加入该社区的能力。


与此同时,像 HTML 评论这样的网站以文学杂志的形式展示了它的一些产品。


(来源:资料图)


项目 1:多景剧场


吉·金(Ji Kim)的“多景剧场”拼贴了一部旧 iPhone 的多个片段。当访问者浏览网站时,图像会重叠,并播放嵌入的音频片段。


当用户点击任何图像时,都会出现一个关于拍摄时间和地点的小描述,以及更多额外的媒体内容。


金的网站旨在模仿记忆的零散性和层次性。这是一种有意分散的数字体验,就像试图回忆几年前的一次家庭旅行一样。


(来源:资料图)


项目 2:有窗户的房间


谢尔比·威尔逊(Shelby Wilson)的带窗户的房间,是一个只允许一种互动的网站:打开和关闭一组窗帘。


该网站有意将物理空间和数字空间混合在一起。威尔逊将浏览器视为通往有物理边界和边缘的地方的门户,但也保留了超现实主义元素(百叶窗关闭时房间不会变暗)和随机元素(每次访问时房间的颜色都会变化),以突出数字形式。


(来源:资料图)


项目 3:HTML 花园


史宾赛·张(Spencer Chang)的网站设想了一个花园在互联网上的样子。


一些由原生 HTML 元素组成的“植物”在生长,每次访问你都会注意到时间的流逝:季节的变化、植物的发芽和开花。没有明确的行为,你所需要做的只是观察。


(来源:资料图)


项目 4:散文剧


凯瑟琳·杨(Katherine Yang)的散文游戏是一首互动诗,鼓励用户在预设的句子结构中输入不同的单词。


该网站以单词为变量,探索互联网的互动性。它把“作者之死”的文学理论,即“文本的意义不是由作者的本意决定的,而是由读者的解释决定的”放在了代码的语境中。


(来源:资料图)


项目 5:Erich Friedman


埃里希·弗里德曼(Erich Friedman)的网站是他生活的个人百科全书,里面有从电影评级到佛罗里达州中部迷你高尔夫球场评论的各种档案。该网站分为数学类、益智类、个人类和专业类,结构比较简单。


它使用基本的 HTML 来展示弗里德曼在过去十年中不拘一格的兴趣,包括从 0 到 9999 的每个数字的有趣事实列表,以及数学和琐事问题的集合。


该网站不需要任何特定操作。它只是对埃里希·弗里德曼的详尽、坦率的描述,在庞大的互联网中占据了一小部分。


(来源:资料图)


项目 6:屏幕博物馆


图卢·图穆(Toulou TouMou)的屏幕博物馆,是一个存放由游戏爱好者创建的浏览器游戏的网站。为了与展示的游戏互动,用户必须在数字空间中导航,就像用 ASCII 图形可视化的物理博物馆一样。


这个网站有实际的参观时间,还会随机选择一个“休息日”。


图穆的博物馆是为了在 Flash 游戏时代给予业余开发者应有的荣誉而创建的,旨在强调承认作者身份和独立游戏丰富历史的重要性。


HTML 能量的网站没有集中的来源,偶然发现让他们觉得自己很特别,就像发现停车场的一幅街头艺术作品一样。它们不是为被发现而设计的,也不是为任何特定操作而优化的。


他们只是按照访客的条件与访客互动,描绘出创作者的风格。如果像谷歌或脸书这样的网站是你购买必需品的超市和购物中心,那么 HTML 能量的网站就像你偶然发现的隐藏花园,在任何地图上都找不到。


支持:Ren