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

news2024/12/28 19:00:31

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一种代码逻辑表达“新范式”:保留编程逻辑,去掉编程语法

逻辑是一个非常古老的话题,很难看到有什么新的东西,特别是新的表达方式。最近被惊艳到了,在分析iVX产品的时候,发现了一种全新的可视化的“逻辑表达范式(或者说新方法)”。看下面有GIF动图演示。 理论上包括…

macbook 软件iMovie for Mac(专业视频剪辑工具)中文版

iMovie mac中文版是一款针对Mac平台量身定做的视频编辑工具,软件凭借流线型设计和直观的编辑功能,可以让您感受前所未有的方式制作好莱坞风格的预告片和精美电影,并且还可以浏览视频资料库,快速共享挚爱瞬间,创建精美的…

手机缺流量?切记,不要买这种卡!

近日,小编在后台看到很多朋友的私信,都在控诉买的流量卡有套路,通过大家的描述,小编发现,很多朋友都是“病急乱投医,犯了一个最大的错误”,只看价格,不看正规性。 ​ 现在网上可能上…

DDL\DML

查询字段 1、查询指定字段 select 字段1, 字段2 ,...] from 表名; select ename, sal from emp; select ename from emp; 2、查询全部字段 select * from 表名; select * from emp; 条件查询 使用 where 语句,放在 from 后 select * from emp where 条件…

UI 自动化稳定性用例实战经验分享!

目录 前言: 大家常说 UI 自动化不稳定,那又如何提高稳定性呢? 操作界面非预期的弹框、广告、浮层 测试系统的 A/B 策略 总结: 前言: 稳定性测试是软件测试的一个重要方面,它旨在评估软件在不同负载和…

[BSidesCF 2020]Had a bad day1

进入环境,一上来就是一段激励的话,没有啥特别的,源码中也没有看见啥有用的提示 但主要是有,参数的传递,加上前面的index.php,想到了PHP伪协议,或许我们可以直接查看一下隐藏源码 报错了&#xf…

nfs服务器的描述,搭建和使用

前言 这是我在这个网站整理的笔记,关注我,接下来还会持续更新。 作者:RodmaChen nfs服务器的描述,搭建和使用 NFS概述工作原理优缺点 nfs服务器搭建服务端客户端 NFS概述 NFS(Network File System)是一种基…

GPT-3.5:ChatGPT的奇妙之处和革命性进步

🌷🍁 博主 libin9iOak带您 Go to New World.✨🍁 🦄 个人主页——libin9iOak的博客🎐 🐳 《面试题大全》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~&#x1f33…

【Koa】[NoSQL] Koa中相关介绍和使用Redis MongoDB增删改查

目录 NoSQL非关系型数据库关系型数据库(RMDB)介绍非关系型数据库(NoSQL)介绍Redis & MongoDB 在 Koa 中使用 Redis (了解)Redis 的安装和使用在 Koa 中连接 和 调用 Redis 在 Koa 中使用 MongoDBMongoDB 的安装MongoShell 操作…

day35KMP算法

1.什么是KMP算法 解决字符串匹配问题;看文本串是否出现过模式串; 文本串:aabaabaaf; 模式串:aabaaf; 暴力解法:两层for循环,时间复杂度:O(m*n) m n分别是长度; kmp解决&a…

HTML中的焦点管理

前言 焦点作为页面交互中的重要一环,涉及到的知识点也比较多,有必要做一个统一的总结。 HTML 中的可获取焦点的元素 具有 href 属性的 HTMLAnchorElement/HTMLAreaElement非禁用态的 HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLBut…

C++实现简单内存池

/写一个简单的内存池class Cgirl { public:int bh;//编号int xw;//胸围static char* m_pool; //内存池的初始地址//内存池初始化函数、static bool initpool() {cout << "调用初始化函数\n\n";m_pool (char*)malloc(18);//向堆内存空间申请18字节if (m_pool …

100天精通Golang(基础入门篇)——第17天:深入解析Go语言中的指针

&#x1f337; 博主 libin9iOak带您 Go to Golang Language.✨ &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &#x1f30a; 《I…

F#奇妙游(17):F#与真空一维平面大地抛石飞行力学

F#还能干点啥 距离上一次更新已经过去了很久&#xff08;40分钟之久&#xff01;&#xff09;&#xff0c;这段时间我在学习F#&#xff0c;并且在工作&#xff08;划掉&#xff0c;躺肥并没有工作要做&#xff09;中使用F#。 那干点啥呢&#xff1f;还是老本行吧&#xff0c;…

ELK 使用kibana查询和分析nginx日志

背景&#xff1a;使用kibana查询和分析nginx请求日志&#xff0c;方便开发人员查询系统日志和分析系统问题。 setp 1、定义Index patterns 2、定义Discover(Search 查询数据) 3、定义Visualizations 3.1 定义Vertical Bar 3.2 、Choose a source 3.3、定义图表 4、定义…

spring boot中常用的安全框架 Security框架 利用Security框架实现用户登录验证token和用户授权(接口权限控制)

spring boot中常用的安全框架 Security 和 Shiro 框架 Security 两大核心功能 认证 和 授权 重量级 Shiro 轻量级框架 不限于web 开发 在不使用安全框架的时候 一般我们利用过滤器和 aop自己实现 权限验证 用户登录 Security 实现逻辑 输入用户名和密码 提交把提交用户名和…

mysql的存储引擎以及适用场景

目录 mysql的体系结构 存储引擎简介 三种存储引擎的区别 如何选择使用哪种的存储引擎&#xff1f; mysql的体系结构 连接层 最上层是一些客户端的链接服务&#xff0c;主要完成一些类似于连接处理&#xff0c;授权认证&#xff0c;以相关的安全方案。服务器也会为安全接入每…

位运算修行手册

*明明自觉学会了不少知识&#xff0c;可真正开始做题时&#xff0c;却还是出现了“一支笔&#xff0c;一双手&#xff0c;一道力扣&#xff08;Leetcode&#xff09;做一宿”的窘境&#xff1f;你是否也有过这样的经历&#xff0c;题型不算很难&#xff0c;看题解也能弄明白&am…

Spring中事务失效的8中场景

1. 数据库引擎不支持事务 这里以 MySQL为例&#xff0c;MyISAM引擎是不支持事务操作的&#xff0c;一般要支持事务都会使用InnoDB引擎&#xff0c;根据MySQL 的官方文档说明&#xff0c;从MySQL 5.5.5 开始的默认存储引擎是 InnoDB&#xff0c;之前默认的都是 MyISAM&#xff…

【node】使用express+gitee搭建图床,并解决防盗链问题

首先创建一个gitee的项目&#xff0c;详细步骤我就不一一说明 注解&#xff1a;大家记得将这个项目开源&#xff0c;还有记得获取自己的私钥&#xff0c;私钥操作如下&#xff1a; node依赖下载&#xff1a; "axios": "cors": "express"…