Tiny Player (js) - 轻量好用、免费开源的 web 视频播放开发组件,内置硬解、软解视频功能

Tiny Player (js) - 轻量好用、免费开源的 web 视频播放开发组件,内置硬解、软解视频功能

一款简单好用的 JS 视频播放器,完美解决我遇到的移动端播放视频的需求,安利给各位。

关于 Tiny Player

Tiny Player 是一个极简的视频播放器 JS 库,内置硬解、软解视频功能,支持原生控件样式以及自定义控件样式,小巧的体积实现了全部的视频播放功能。

Tiny Player 官网

Tiny Player JS 视频播放器技术特性

  • 兼容性好:没有其他依赖,任何框架和浏览器都可以使用,支持移动端使用
  • 多格式支持,支持流式播放:不仅支持 mp4、webm、ogg 等种常见视频格式,也支持支持 m3u8,支持自动切换
  • 控制栏可插拔:支持自定义控制栏,控制栏挂载到目标节点,支持自定义控制栏组件显示隐藏。
  • 支持指定视频片段播放:通过入参指定片段播放,类似裁剪
  • 轻量:仅 25KB 大小,gzip 压缩后仅 7KB
  • 「wip」软解:支持音视频软解,支持自定义解码器,解决各个浏览器的兼容性问题(开发中)

开发上手体验

在 web 开发中要实现视频播放的功能,如果使用原生视频播放器,往往兼容性不好,而且视频控制样式比较基础,不太好用,这时候就需要一款好用的视频播放器。之前我也推荐过 xgplayer.js 西瓜播放器,虽然也好用,但比较臃肿,而今天推荐的 Tiny Player 就很小巧。

我们可以用下面三种方式来安装:

然后在项目中使用:

传统开发也可以直接引入 标签,然后初始化:

tiny-player.min.js 文件可以通过下载 Github 项目中获取。从上面几行示例代码可以看到,使用非常简单。

TinyPlayer 支持 MSE (Media Source Extensions),这是一种 HTML5 规范,允许我们的 JavaScript 控制媒体流的缓冲区,以便可以无缝地播放。

目前也支持 HLS (HTTP Live Streaming),这是 Apple 的动态码率自适应技术。主要用于 PC 和 Apple 终端的音视频服务。包括一个 m3u(8) 格式的索引文件,记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。这种方式播放视频非常常见。

Tiny Player 文档

更多的参数用法可阅读文档,官网也提供了充足的代码例子,集成到项目中非常简单。不过根据我的体验,官网估计是挂在 Github 上,访问不是很稳定,偶尔需要工具加持才能打开。

免费开源说明

TinyPlayer 是一个免费开源的 JavaScript 视频播放器项目,源码托管在 Github 上,任何人都可以免费下载使用,不过 Github 仓库主页上并没有明确表示采用 MIT 开源协议,而在官网的页脚才能看到,总之,可以放心使用。

原文链接:https://www.thosefree.com/tiny-player-js

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/44854.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android Service启动ANR原理

一、前言 在Service组件StartService()方式启动流程分析文章中,针对Context#startService()启动Service流程分析了源码,其实关于Service启动还有一个比较重要的点是Service启动的ANR,因为因为线上出现了上百例的"executing service &quo…

vue三级路由的写法

{path: "/trafficmanagement",component: Layout,redirect: "/trafficmanagement",alwaysShow: true,meta: {title: "通行模块",icon: "excel",},children: [{path: "carline",name: "carline",alwaysShow: true,…

OpenCV图像处理-视频分割静态背景-MOG/MOG2/GMG

视频分割背景 1.概念介绍2. 函数介绍MOG算法MOG2算法GMG算法 原视频获取链接 1.概念介绍 视频背景扣除原理:视频是一组连续的帧(一幅幅图组成),帧与帧之间关系密切(GOP/group of picture),在GOP中,背景几乎…

LeetCode116. 填充每个节点的下一个右侧节点指针

116. 填充每个节点的下一个右侧节点指针 文章目录 [116. 填充每个节点的下一个右侧节点指针](https://leetcode.cn/problems/populating-next-right-pointers-in-each-node/)一、题目二、题解方法一:迭代方法二:递归 一、题目 给定一个 完美二叉树 &…

【nginx】nginx中root与alias的区别:

文章目录 root与alias主要区别在于nginx如何解释location后面的uri,这会使两者分别以不同的方式将请求映射到服务器文件上。 root的处理结果是:root路径+location路径 alias的处理结果是:使用alias路径替换location路径 alias是一…

Qt Core学习日记——第七天QMetaObject(上)

每一个声明Q_OBJECT的类都具有QMetaObject对象 Q_OBJECT宏源代码: #define Q_OBJECT \ public: \ QT_WARNING_PUSH \ Q_OBJECT_NO_OVERRIDE_WARNING \ static const QMetaObject staticMetaObject; \ virtual const QMetaObject *metaObject() const; \ vir…

istio安装部署总结

istio安装部署总结 大纲 istio基础概念版本选择安装istio核心主件卸载istiokiali安装 istio基础概念 https://istio.io/latest/zh/docs/ 中文文档 istio是一个服务治理平台,治理服务间的访问,(例如流量控制,安全策略&#xf…

【C++链表】

目录 前言一、搭建链表实现的框架二、链表的构造函数三、链表的尾插四、链表的遍历(重点)迭代器的遍历const修饰的迭代器 五、代码实现 前言 最近用C写了一下list的基本功能,感触颇深。本以为会跟之前用C写list一样会很轻松,没想到更难了。要考虑的东西…

代码随想录| 图论04 查并集 ●查并集理论知识 ●1971.寻找图中是否存在路径 ●684.冗余连接 ●685.冗余连接II

#查并集理论知识 并查集用处:解决连通性问题 将两个元素添加到一个集合中。判断两个元素在不在同一个集合 思路:将三个元素A,B,C (分别是数字)放在同一个集合,其实就是将三个元素连通在一起&a…

k8s常见的资源对象使用

目录 一、kubernetes内置资源对象 1.1、kubernetes内置资源对象介绍 1.2、kubernetes资源对象操作命令 二、job与cronjob计划任务 2.1、job计划任务 2.2、cronjob计划任务 三、RC/RS副本控制器 3.1、RC副本控制器 3.2、RS副本控制器 3.3、RS更新pod 四、Deployment副…

IBM:2023 年数据泄露的平均成本将达到 445 万美元

IBM 发布年度《数据泄露成本报告》,显示 2023 年全球数据泄露平均成本达到 445 万美元,比过去 3 年增加了 15%。创下该报告的历史新高。 报告显示,企业在计划如何应对日益增长的数据泄露频率和成本方面存在分歧。研究发现,虽然 95…

自定义MVC

目录 一.什么是MVC 1.1.三层架构和MVC的区别 二.自定义MVC工作原理图 三.自定义mvc实现 3.1 创建web工程 3.2 中央处理器 3.3 Action接口定义 3.4 实现子控制器 3.5 完善中央控制器 3.5.1 请求分发功能 3.5.2 使用配置文件配置action 3.5.3 请求参数处理 1. 定义接…

QT DAY1

1.思维导体 2.作业 #include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {qDebug()<<this->size();qDebug()<<this->rect().size();qDebug()<<this->geometry().size();qDebug()<<this->frameGeometry().siz…

安防视频管理平台GB设备接入EasyCVR, 如何获取RTMP与RTSP视频流

安防视频监控平台EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力&#xff0c;比…

六边形架构和分层架构的区别?

六边形架构和分层架构是什么&#xff1f; 六边形架构&#xff08;Hexagonal Architecture&#xff09;和分层架构&#xff08;Layered Architecture&#xff09;是两种常见的软件架构模式。六边形架构强调将核心业务逻辑与外部依赖解耦&#xff0c;通过接口与外部世界进行通信。…

桥接模式-处理多维度变化

程序员小名去摆摊卖奶茶了&#xff0c;口味有香、甜。 型号有大、中、小。假如小名先在家里把这些奶茶装好&#xff0c;那么最少要装2x3 6杯奶茶&#xff0c;如果此时新增一个口味&#xff1a;酸&#xff0c;那么就需要多装3杯奶茶了。而且这样做&#xff0c;等客户买走一种&a…

【【51单片机直流电机调速】】

学会电机调速&#xff0c;掌握中国速度 PWM的生成方法 先用户设定一个比较值&#xff0c;然后计数器定时自增。 当计数器<比较值&#xff0c;输出0 当计数器>比较值&#xff0c;输出1 main.c #include <REGX52.H> #include"delay.h" #include"…

【弹力设计篇】聊聊熔断设计

为什么需要熔断 熔断这个词一听从生活中就是保险丝超过一定的温度后自动断开&#xff0c;以此来保护家用电器&#xff0c;属于电路中自我保护装置。如果没有熔断&#xff0c;那么家用电器一定会损坏的。 进一步再来分析一下&#xff0c;在分布式系统中&#xff0c;各个系统之间…

酷雷曼无人机技能培训考试圆满举办

2023年7月18日、19日&#xff0c;以“向云端起航&#xff0c;让技术落地”为主题的酷雷曼无人机技能提升培训会在酷雷曼北京运营中心隆重举行&#xff0c;来自全国各地的众多合作商参加了本次培训&#xff0c;通过系统、全面的学习成功取得了专业无人机飞行员执照&#xff0c;为…

django跨域设置

1.安装 (venv) ***\data_analyse_web>pip install django-cors-headers 2.添加应用 :在settings.py中添加应用,放到任意位置都行 INSTALLED_APPS {# ...corsheaders,# ... } 3. 设置中间层&#xff0c;在settings.py中添加中间层&#xff0c;放到最前面 MIDDLEWARE [c…