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

这篇具有很好参考价值的文章主要介绍了Tiny Player (js) - 轻量好用、免费开源的 web 视频播放开发组件,内置硬解、软解视频功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

关于 Tiny Player

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

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

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 (js) - 轻量好用、免费开源的 web 视频播放开发组件,内置硬解、软解视频功能,前端,javascript,开源

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

免费开源说明

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

原文链接:https://www.thosefree.com/tiny-player-js文章来源地址https://www.toymoban.com/news/detail-604014.html

到了这里,关于Tiny Player (js) - 轻量好用、免费开源的 web 视频播放开发组件,内置硬解、软解视频功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter开发实战-video_player视频播放功能及视频缓存

    flutter开发实战-video_player视频播放功能及视频缓存 最近开发过程中video_player播放视频, 在pubspec.yaml引入video_player 在iOS上,video_player使用的是AVPlayer进行播放。 在Android上,video_player使用的是ExoPlayer。 2.1 在iOS中的设置 在iOS工程中info.plist添加一下设置,以便支持Https,HTTP的视频

    2024年02月14日
    浏览(55)
  • Unity2020Video player发布后无法播放视频问题

    我也是小白,用Unity过程中也是遇到很多草蛋问题,我在做demo的时候第一次用到Unity的video player,听说ogv格式能直接播放,我就把视频转了ogv格式,然后放到clip里,编辑器里运行完全没问题,发布打包后就播放不了,黑屏都没有,直接视频没了,百度搜的绝对路径说是放到

    2024年02月15日
    浏览(51)
  • 【Flutter】Flutter 使用 video_player 播放视频

    【Flutter】Flutter 使用 video_player 播放视频 大家好,我是小雨青年,今天我要和大家分享一款非常实用的 Flutter 包—— video_player 。这个包可以让我们在 Flutter 应用中轻松地嵌入和控制视频播放,不论是 Android、iOS 还是 Web 平台。 本文重点介绍: video_player 的基本功能和用法 如

    2024年02月05日
    浏览(49)
  • vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频

    1、背景 项目中有涉及视频播放的需求,并且UI设计了样式,与原生的视频video组件有差异,所以使用了vue-video-player插件,并对vue-video-player进行样式改造,自定义播放暂停按钮、全屏按钮、时间进度条样式等,自动播放设置、设置一开始全屏播放视频、监听全屏事件等。 2、效

    2024年02月05日
    浏览(46)
  • Unity播放带Alpha通道的视频【WebM+Video Player】(替代播放GIF方案)

    在Unity中播放GIF或者动态效果,可以通过Video Player播放带透明通道的WebM视频来实现。 制作带Alpha的MOV视频 制作带Alpha通道的MOV视频有多重方式,如AE、PR、PS等等,具体制作过程可以自行百度。 将MOV视频格式转化为WebM格式 将WebM格式导入Unity,设置视频播放 完成动态效果展示

    2024年02月13日
    浏览(55)
  • vue-video-player,springboot实现视频分段下载播放

    事情的起因是在博主把项目部署到服务器上后,发现由于视频太大,加上服务器太垃圾,导致稍微大点的视频加载很久才能播放(指十多分钟…),然后就上网查找资料,看下咋实现。 这里涉及到有关http请求的知识“HTTP Header里的Range和Content-Range参数,Range是在请求头里 Ra

    2023年04月13日
    浏览(68)
  • 前端实现视频播放功能----vue-video-player --save

    步骤一: npm安装插件 : npm install vue-video-player --save 如果报错 安装具体版本 如下所示: npm install --save vue-video-player@4.0.6  如果package.json文件内显示则为安装成功 步骤二: 局部引入---这里因为只有一个页面需要所有采用的局部引入 在需要的页面引入(这里注意路径不要写错

    2024年02月10日
    浏览(44)
  • 【vue】 vue 实现视频播放 vue-video-player

    注:用来测试的在线视频url地址 1.下载依赖 vue2 推荐下载指定版本依赖,不然可能下载不下来报错。 2.全局注册main.js 3.新建vue文件 下班`

    2024年02月16日
    浏览(42)
  • vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件

    1、背景 项目中有涉及视频播放的需求,并且UI设计了样式,与原生的视频video组件有差异,所以使用了vue-video-player插件,并对vue-video-player进行样式改造,自定义播放暂停按钮、全屏按钮、时间进度条样式等,自动播放设置、设置一开始全屏播放视频、监听全屏事件等。 2、效

    2024年02月08日
    浏览(56)
  • uniapp 引入海康H5player实现视频监控的播放

    uniapp直接调用海康H5player方法,只能在web浏览器页面正常播放,实机运行会因为找不到文件的相对路径而报错无法播放。因此需要通过 web-view 或 iframe 引入 html 的方式来实现实时视频监控的播放。具体步骤如下: 1、首先将海康h5player的相关文件,引入到static文件夹下,文件相

    2023年04月08日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包