您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

超质量 HTML5 视频解析播放器XGPlayer

时间:2020-11-24 12:02:06  来源:  作者:

今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。

超质量 HTML5 视频解析播放器XGPlayer

 

xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓冲、无缝切换等功能。同时集成了对flv、hls、dash的点播及直播支持。

超质量 HTML5 视频解析播放器XGPlayer

 

西瓜播放器是一个Web视频播放器类库,基于一切都是组件化原则设计了独立可拆卸的UI组件。

功能特性

从底层解析 MP4、HLS、FLV 探索更大的视频播放空间。

  • 易拓展:灵活的插件体系、PC移动端自动切换、安全的白名单机制;
  • 更丰富:强大的MP4控制、点播的无缝切换、有效的带宽节省;
  • 较完整:完整的产品机制、错误的监控上报、自动的降级处理;
超质量 HTML5 视频解析播放器XGPlayer

 

安装

# 最新稳定版
$ npm i xgplayer -S

同时也支持cdn方式引入xgplayer插件。

<script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js"></script>

快速使用

// 占位DOM
<div id="mse"></div>

<script>
// 实例化
let player = new Player({
  id: 'mse',
  url: '//abc.com/**/*.mp4'
  // ...
});
</script>
超质量 HTML5 视频解析播放器XGPlayer

 

播放器提供了较丰富的配置选项,如自动播放、贴图、音量控制、内置控件关闭等功能。

超质量 HTML5 视频解析播放器XGPlayer

 


超质量 HTML5 视频解析播放器XGPlayer

支持自定义弹幕


超质量 HTML5 视频解析播放器XGPlayer

视频清晰度配置


超质量 HTML5 视频解析播放器XGPlayer

 

西瓜播放器同样也支持音乐播放。

超质量 HTML5 视频解析播放器XGPlayer

 

import 'xgplayer';
import Music from 'xgplayer-music';

let player = new Music({
  id: 'vs',
  url: [
    {
      src: './song01.m4a',name: 'song01',vid: '000001',poster: 'poster01.jpg'
    },
    {
      src: './song02.m4a',name: 'song02',vid: '000002',poster: 'poster02.jpg'
    },
    {
      src: './song03.m4a',name: 'song03',vid: '000003',poster: 'poster03.jpg'
    }
  ],
  volume: 0.8,
  width: 900,
  height: 50,
  preloadNext: true,
  switchKeepProgress: false,
  abCycle: {
    start: 3,
    end: 9,
    loop: true
  }
})

支持在线快速生成播放器配置。

超质量 HTML5 视频解析播放器XGPlayer

 

非常优秀的一款开源音视频播放器插件,大家不要错过哈~

最后附上项目文档及地址链接。

# 文档示例
https://v2.h5player.bytedance.com/

# 仓库地址
https://github.com/bytedance/xgplayer

好了,今天就介绍到这里。希望以上的分享对小伙伴们有所帮助。



Tags:XGPlayer   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24  Tags: XGPlayer  点击:(199)  评论:(0)  加入收藏
▌简易百科推荐
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  鳌拜的表哥熬夜    Tags:HTML5   点击:(343)  评论:(0)  加入收藏
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  趣谈前端    Tags:H5编辑器   点击:(90)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18      Tags:H5   点击:(228)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19      Tags:HTML5   点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20      Tags:HTML5   点击:(179)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29      Tags:H5应用   点击:(165)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24      Tags:XGPlayer   点击:(199)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12      Tags:H5DS   点击:(393)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12      Tags:HTML5   点击:(113)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10      Tags:app开发   点击:(109)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条