bytedance / xgplayer Goto Github PK
View Code? Open in Web Editor NEWA HTML5 video player with a parser that saves traffic
Home Page: https://h5player.bytedance.com/
License: MIT License
A HTML5 video player with a parser that saves traffic
Home Page: https://h5player.bytedance.com/
License: MIT License
Hey, our team are using xgplayer now, and we believe xgplayer is awesome.
Do you have any play to add keyboard shortcuts, like
里面貌似都是内网的 npm 的地址
请问,这个播放器 的控制条 可以在手机端也显示么?
HLS可以支持加密播放, 请问该播放器支持标准的播放器播放吗?
我们需要用到定制的hls.js,请问能否在用内置的hls.js之前先判断下windows有没有挂载,如果有优先用。
插件:xgplayer-flv
用chrome模拟弱网(3G)的情况下,切换清晰度,然后立即拖动进度条,这个时候播放器就会无线转菊花。分析浏览器求情,应该是切换清晰度后,新视频源的元数据信息没有回来,使用的老的关键帧数据计算range造成的。麻烦帮忙看看
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.
如题
在使用插件的过程中,发现几个我需要改动的地方没法用配置项的方式去修改插件默认的配置。比如视频不自动播放时:中间位置上的播放,暂停,重播按钮,我想替换成新的样子,就没法直接改配置去替换。如果下个版本能支持这个简单配置的话,对我来说那就很棒了
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
http://jsbin.com/noqakog/3/edit?html,output
Click 1x, then you get 'undefined'
点击 1x 按钮,会看到 undefined
In the mobile version of Google browser, play MP4 format, the player has no voice.
自动播放兼容性不行,基本只能在pc端
我在 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,不知道哪里使用的不对,请指教!
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 : )
诸如油管一般效果的自动清晰度切换,如何用这个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));
});
As shown in the title.
autoplay为false或者不写时出现网络连接似乎出现问题界面,刷新也没用,为true时就没问题,手机调试时这个问题不存在。
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.
1、是否可以支持播放blob对象或者arraybuffer对象?
2、是否可以播放过程中动态添加视频源?
Open this link in IE 11 to see: http://h5player.bytedance.com
调用 canPlayType 方法应该是需要传入一个参数,但是查看你们源码在调用 this.video.canPlayType()
时没有传入参数:
{
key: "canPlayType",
value: function() {
this.video.canPlayType()
}
}
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
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..
希望之后的版本可以加上一个配置项
按照文档里写法,在vue搭建的项目中,created()钩子里拿到数据后实例化播放器,打断点看到执行了const player = new Player({}),但是未挂载到DOM中,请教一下可能的原因?十分感谢
whitelist: [/iPhone/gi,/Android/gi],
我是这样配置的白名单。
在微信中,原生controls 和播放器 controls 会两个同时存在。
是否我这个白名单配置有问题呢?好困惑。
还是这个有待修复?
win7 64bit执行babel-node app.js, 会报missing message.js错误。
npm i -save-dev @babel/core 和 npm i -save-dev @babel/node后,问题解决。难道头条的前端全部配mac吗。。。
new Buffer(...)
is deprecated and unsafe. It is being used in a few places. Can it be replaced with Buffer.from(...)
?
when does the live go online about gxplayer?
As shown in the title.
就是在win10 自带浏览器中,关闭键盘快捷键功能会失效。
1.既有代码没有保证流返回\解析的先后顺序,在最后一次seek发起之后,之前的seek请求都应该被cancel。
2.seek时请求的 range[end] 不应包含下一个关键帧的首字节(算错了)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.