bytedance / xgplayer

A HTML5 video player with a parser that saves traffic

Introduction

xgplayer is a web video player library. It has designed a separate, detachable UI component based on the principle that everything is componentized. More importantly, it is not only flexible in the UI layer, but also bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence. Especially on mp4 it can be staged loading for that does not support streaming mp4. This means seamless switching with clarity, load control, and video savings. It also integrates on-demand and live support for FLV, HLS, and dash. Document

Start

1. Install

   $ npm install xgplayer

2. Usage

   Step 1:

   <div id="vs"></div>

   Step 2:

   import Player from 'xgplayer';
   
   const player = new Player({
       id: 'vs',
       url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4'
   })

   This is the easiest way to configure the player, then it runs with video. For more advanced content, see the plug-in section or documentation. more config

Plugins

xgplayer provides more plugins and supports custom plugins, for more content viewing plugins. There are many built-in plugins in the player, if you need to close specific plugins, you can disable them by ignores configuration

Dev

In order to debug by developers, we provide demos code in the fixtures directory of the repo. The player uses yarn for package management, and it only takes a few simple steps to start debugging in the repo

$ cd xgplayer
$ yarn
$ yarn dev:xgplayer

To debug other plugins, please refer to the scripts command provided in package.json in the root directory of the repo, such as:

$ yarn dev:hls
$ yarn dev:flv
$ yarn dev:mp4

License

Welcome to use xgplayer! Please read the following terms carefully. Using xgplayer means that you accept and agree to the terms.

1. Xgplayer is licensed under the MIT License. You comply with its obligations by default.
2. By default, you authorize us to place your logo in xgplayer website, which using xgplayer. If you have any problem, please let us know.

xgplayer's Issues

[BUG] v1.1.0 playbackRate undefined

http://jsbin.com/noqakog/3/edit?html,output

Click 1x, then you get 'undefined'

点击 1x 按钮，会看到 undefined

about onlive

when does the live go online about gxplayer?

[bug]xgplayer-flv切换清晰度后拖动进度条无限转菊花

插件：xgplayer-flv
用chrome模拟弱网（3G）的情况下，切换清晰度，然后立即拖动进度条，这个时候播放器就会无线转菊花。分析浏览器求情，应该是切换清晰度后，新视频源的元数据信息没有回来，使用的老的关键帧数据计算range造成的。麻烦帮忙看看

Destroy the player and report error 'getBoundingClientRect of undefine'

As shown in the title.

请问，这个播放器 的控制条 可以在手机端也显示么？

请问，这个播放器 的控制条 可以在手机端也显示么？

how to resolve the problem that Chrome 66 turning off autoplay released in April 2018

when i new a xgplayer instance that has a config autoplay: true, but it not auto at chrome.
so i switch the browsers to use firefox. it works.
how to resolve this problem
after i use the play method referencing api documents
player.play()
then chrome has a error:
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first

可以支持视频下载到本地功能吗

play blob content

1、是否可以支持播放blob对象或者arraybuffer对象？
2、是否可以播放过程中动态添加视频源？

[feature request] Support keyboard shortcuts

Hey, our team are using xgplayer now, and we believe xgplayer is awesome.
Do you have any play to add keyboard shortcuts, like

1. → to forward by 10 seconds
2. ← to backward by 10 seconds
3. space to pause or resume
4. ↑ to increase volume
5. ↓ to decrease volume

增加网络环境提醒，非wifi环境，提醒是否使用流量播放

Change the tips language automatically according to the browser language

As shown in the title.

更多可供用户配置的一些优化项

在使用插件的过程中，发现几个我需要改动的地方没法用配置项的方式去修改插件默认的配置。比如视频不自动播放时：中间位置上的播放，暂停，重播按钮，我想替换成新的样子，就没法直接改配置去替换。如果下个版本能支持这个简单配置的话，对我来说那就很棒了

flv在快速seek(上一次seek没有完成就发起)的情况下流解析失败

1.既有代码没有保证流返回\解析的先后顺序，在最后一次seek发起之后，之前的seek请求都应该被cancel。
2.seek时请求的 range[end] 不应包含下一个关键帧的首字节（算错了）

When using xgplayer with textTrack in firefox, console reports error 's.sheet.addRule'

Cannot use crossorigin textTrack files

发现一个问题，就是在IE浏览器中出现如下问题

原因是在.xgplayer-enter-logo中的background-image。

播放器手机端全屏样式

全屏之后会这样，是为什么呢？

need config retryCount as QiNiu upload SDK

when the video url is Invalid, it auto reload ceaselessly。so i think we need a config as QiNiu retryCount it can upload 3 times acquiescently.

关于手机端 控制条问题。请大佬进来看看

whitelist: [/iPhone/gi,/Android/gi],
我是这样配置的白名单。
在微信中，原生controls 和播放器 controls 会两个同时存在。
是否我这个白名单配置有问题呢？好困惑。
还是这个有待修复？

浏览器调试，autoplay为false或者不写，出现网络连接似乎出现问题界面

autoplay为false或者不写时出现网络连接似乎出现问题界面，刷新也没用，为true时就没问题，手机调试时这个问题不存在。

自动播放问题

自动播放兼容性不行，基本只能在pc端

在UC浏览器video视频窗口悬浮，有解决方案吗？

请问mp4到FMP4是怎么实现的呢

Congratulations on the release, it's so useful !!!

Suggest adding some apis to get status of the controls

Hi,
now we inspect DOM to see the status of controls, it is not so convenient
can your guys add some apis to get status of controls ?
for example:
get the status of fullscreen and whether the bullet is enabled and so on via player instance directly

希望能添加一些可以获取控件状态的api, 比如弹幕是否开启、全屏是否开启
现在的方式是用js查看DOM的状态，有点不方便

Thanks : ）

Fix typos in README.md

When xgplayer width is very small (such as 200px), the error info 'network is offline, please try to refresh' in the center will do the suitability problem

[bug]xgplayer-flv.js插件在模拟弱网的情况下切换清晰度然后立即拖动进度条无限转菊花

如题

关于MP3歌词问题

一进来MP3播放器，会报 Failed to execute 'get' on 'IDBobjectStore' NO key or key
当点播放会报 Reduce of empty array with no initial value
这是我的配置：
id: 'mses',
url: res,
volume: 0.8,
height: 50,
ignores: ['cover', 'next', 'prev', 'mp4player'],
keyShortcut: 'on',
offline: false,
preloadNext: false，
麻烦大佬看看是什么原因呢

Replacing the Buffer constructor with Buffer.from(...)

new Buffer(...) is deprecated and unsafe. It is being used in a few places. Can it be replaced with Buffer.from(...)?

[bug] playbackRate.js

let ul = util.createDom('xg-playback', '<p class="name"><span>1x</span></p>', {}, 'xgplayer-playback'), root = player.controls;
let tips = util.createDom('xg-tips', tipsSpeed, {}, 'xgplayer-tips')

There is no options in ul

In the mobile version of Google browser, play MP4 format, the player has no voice.

In the mobile version of Google browser, play MP4 format, the player has no voice.

Replay button style bug in IE 11

Open this link in IE 11 to see: http://h5player.bytedance.com

suggest adding a api that click the video play and pause

package-lock.json 应该去掉

里面貌似都是内网的 npm 的地址

dom wrapper position changed after destroy api is called

1. dom wrapper position changed after destroy api is called
2. player.version and NPM version are inconsistent

安卓 webview 里无法像 iOS webview一样全屏

混合开发，在iOS的webview里表现如下

安卓的webview里点击全屏，仅右下角全屏按钮变化，视频并未全屏，配置如下：

还有一个问题

就是在win10 自带浏览器中，关闭键盘快捷键功能会失效。

How to switch the video being played url？

无法实例化video

按照文档里写法，在vue搭建的项目中，created()钩子里拿到数据后实例化播放器，打断点看到执行了const player = new Player({})，但是未挂载到DOM中，请教一下可能的原因？十分感谢

How to solve the problem that xgplayer cannot work with custom DOM and UI in Android Mobile browsers?

In Android Mobile browsers(Chrome, UC...), when users touch the start button of xgplayer, the browser console will report error "DOMException: play() can only be initiated by a user gesture" and xgplayer will not continue the work. In order to avoid this, xgplayer provides the whitelist for the mobile browsers. If the mobile device and browser info is not in the whitelist, xgplayer will work with native video DOM and UI.

hls.js问题

我们需要用到定制的hls.js，请问能否在用内置的hls.js之前先判断下windows有没有挂载，如果有优先用。

请问支持加密的HLS视频播放吗?

HLS可以支持加密播放, 请问该播放器支持标准的播放器播放吗?

how to switch the video url

env:
vue
when i use api destory:

this.player.destroy()

then

this.player = new Player({
id: 'mse',
url: data,
volume: 0.6,
autoplay: true,
poster: require('assets/images/demand/video_poster.png'),
height: window.innerHeight*0.95,
width: window.innerWidth,
preloadTime: 10,
controls: true,
controlsList: ['nodownload'],
playbackRate: [0.5, 0.75, 1, 1.5, 2],
lang:'gs-px',
});
this.player dont have a case new Player()

i think xgplayer should have a api this.player.update({url: new url})

i Solve the problem by createElement('div') then new Player() finally..

ERROR TypeError: xgplayer_1.default is not a constructor

我在 Typescript 文件中这样使用：

import Player from 'xgplayer';
const player = new Player({
    id: 'vs',
    url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4'
})

但是在控制台报错：

ERROR TypeError: xgplayer_1.default is not a constructor

打印出来 Player 是 undefined，不知道哪里使用的不对，请指教！

[bug]xgplaer-flv插件在Firefox和safari无法播放

Firefox报错截图：

safari也播放不了

关于播放器加载动画的问题

希望之后的版本可以加上一个配置项

ERROR TypeError: Failed to execute 'canPlayType' on 'HTMLMediaElement': 1 argument required, but only 0 present.

调用 canPlayType 方法应该是需要传入一个参数，但是查看你们源码在调用 this.video.canPlayType() 时没有传入参数：

{
            key: "canPlayType",
            value: function() {
                this.video.canPlayType()
            }
        }

关于实现自动清晰度切换

诸如油管一般效果的自动清晰度切换，如何用这个xgplayer实现呢？使用以下代码貌似并不行，文档上也没有特别说明

let player=new Player({
            id:'vs',
            url: [{src:'./xgtest-240.mp4',type:"video/mp4"},{src:'./xgtest-480.mp4',type:'video/mp4'},{src:'./xgtest-720.mp4',type:'video/mp4'}],
            poster:'./poster.png',
            playbackRate: [0.5, 0.75, 1, 1.5, 2],
            thumbnail: {
                pic_num: 44,
                width: 160,
                height: 90,
                col: 10,
                row: 10,
                urls: ['./xgplayer-demo-thumbnail.jpg'],
            },
        })
        player.emit('resourceReady', [{name: '标清', url: './xgtest-240.mp4',cname:'标清'},{name: '高清', url: './xgtest-480.mp4',cname:'高清'}, {name: '超清', url: './xgtest-720.mp4',cname:'超清'}])
        player.on('error', function (err) {
            console.log(JSON.stringify(err));
        });

window 7 64bit demo启动问题

win7 64bit执行babel-node app.js, 会报missing message.js错误。
npm i -save-dev @babel/core 和 npm i -save-dev @babel/node后，问题解决。难道头条的前端全部配mac吗。。。