<返回更多

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

2020-11-24    
加入收藏

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

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

 

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

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

 

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

功能特性

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

超质量 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

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

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>