jabbany / abplayerhtml5 Goto Github PK

想知道怎么实现的

如题

滚动弹幕碰撞算法有望改进。

B站当前的碰撞算法是这样的，1、从上到下搜索第一处能放下弹幕的地方（跟字号有关），2、如果放不下，从上到下找空间最大的地方。这个规则可以在密度不超过限度的时候保证没有弹幕在整个生命周期中发生碰撞。

ABPlayerHTML5 当前的碰撞算法是这样的，尽量保证弹幕开始时不发生碰撞，没有考虑到运行过程中发生碰撞。缺点在大量超长弹幕出现的时候尤为明显。

我在 Danmaku2ASS 里写了一个参考算法 m13253:danmaku2ass/danmaku2ass.py@f6a7601#L520

给出算法详细定义：
“能放下弹幕的地方”：新来的弹幕整个生命周期都不会和之前的弹幕碰撞。
“跟字号有关”：即使屏幕上有大量小字体的弹幕，也能够铺满屏幕。
“空间最大的地方”：定义1：若某横行最后一次使用的弹幕的时间轴是所有横行中最小的，该横行是空间最大的地方；定义2：若某横行所有弹幕的右端横坐标的最大值是所有横行中最小的，该横行是空间最大的地方。（Danmaku2ASS 用的是定义1。）

现在这样的判断效率在所有弹幕都能找到放得下的地方的时候是很赞的，但是如果弹幕非常非常密集（如 av124748），效率就会拖后腿。如果能用数学方法减少搜索的比较次数，就可能大大提高效率。

In webkit based browsers, the scrolling comments lag when the comment list is displayed, this is due to several thousand elements in the dom making it hard for the JS to manipulate a portition of it.

We should consider switching to Canvas but that currently does not support CSS3 3D effects. Another approach would be to limit DOM operations by using CSS3 Transitions and a timer to follow the movements and stop actions. Translating movements to CSS3 would be difficult though

在元素较多的页面上ABPlayerHTML5会卡。这是因为在webkit和类似渲染器下DOM处理效率会被多余的不被操作元素也减慢。

几个解决方案包括采用Canvas（但是不支持3D变化了）或者限制DOM操作改用CSS3效果同时采用一个计时器来标志弹幕的位置，不过把复杂的定位弹幕转化为CSS3会比较蛋疼。

好像很卡的样子，建议试用 CSS3 动画效果。

比如 transition 和 keyframe。
另外建议用 transform: translation 而不是 top left，效率要更高。（但是也有反对意见）

我把它以播放器接口的方式搭建在了校园内网~好多人说希望可以发送弹幕，可是我不知道怎么做，即使本地建立数据库也可以的= =主要是我想知道怎么做，谢谢

inst.cmManager.send(ABPInst.txtText.value);

但是这样不行啊，求问如何才能将刚发送弹幕立即显示到界面

是否支持HLS？

现在测试发现好像屏幕虽然小了，但弹幕还是按照xml中的字体去显示，这样就导致了弹幕太大。

看文档也没有找到相应的处理方法。

#3 太跑题，于是新立一 issue。

建议不同问题在不同的 issue 里汇报，弹幕渲染问题去 CommentCoreLibrary 汇报。

@zzjin @Yangff @sgdxpdqqzh @superwbd

<d p="0.61000001430511,1,25,16777215,1463218112,0,e9377a86,1848047785">警官看穿了一切</d>

显示的是这段错误

现在的全屏是网页全屏。

关于真正全屏，我做了下尝试：

function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

然后，player.js 466:

            ABPInst.btnFull.addEventListener("click", function(){
                ABPInst.state.fullscreen = Boolean(document.webkitIsFullScreen||document.mozFullScreen);
                if(!ABPInst.state.fullscreen){
                    launchFullscreen(document.documentElement); 
                    //launchFullscreen(document.getElementsByClassName("ABP-Unit"));
                    //addClass(playerUnit, "ABP-FullScreen");
                }else{
                    //removeClass(playerUnit, "ABP-FullScreen");
                    exitFullscreen();
                }

这样就可以实现整个全屏。

但是不知道为什么，我无论如何不可能实现单个元素全屏，没有任何例程可以在我的任何浏览器上运行。。。。一切办法都直接报错。估计还是我打开方法不对。。。。

弹幕一开始加载后 如果有用户新增评论 要怎么处理

RT。。貌似我并没有找到关于本项目比较全的文档，关于inst的一些用法也不得而知。。请问我该去哪里查看

I'm impressed that there is an active open source danmaku project here. This is awesome and great.

While I'm playing with your code, I felt like it is impractical to crawl video source directly from MP4 or any video media files as it often involving copyright issues and video providers aren't providing this format publicly.

I have made an example (Youtube) of using some libraries to display video as iframe element.

Hope it helps. Cheers.

https://github.com/chayoka/videojs-danmaku-player

比如说服务器有一个视频video,它被分成了几段,video_1.mp4, video_2.mp4, video_3.mp4等等, 怎么无缝切换分段?支持吗?

1. http://stackoverflow.com/questions/5054560/can-i-avoid-the-native-fullscreen-video-player-with-html5-on-iphone-or-android
2. http://stackoverflow.com/questions/19521667/disable-fullscreen-iphone-video

最近没时间code，如果有时间我就交pull request。

这个是播放器的库，主体是播放功能。纯有关弹幕的东西应该挪到CommentCoreLibrary里面，那里测试更多，文档更全而且可以更好的Document代码的位置。

I am trying to clone your HTML5 player because I think it is fun. Am i going crazy or does this not yet work? I tried to start this on my local php server but no video shows up. Can you please help me with this.

目前是使用css3动画的吗?

现在的手机在安卓微信下访问 ABPlyerHTML5 反而会有问题，看现象似乎是播放器把弹幕盖住了。
好像很多浏览器也是同样的现象。

iOS 的微信客户端反而可以通过设置 webkit-playsinline 来实现弹幕。

有没有什么好办法可以直接解决冲突的？

有没有QQ群,想一起讨论下

Seems to have a conflict with bootstrap progress-bar s, will look into this.

最近正在学习这个项目，不过代码下到本地之后为什么没有弹幕，只有视频在播放？
大家有没有遇到过这个问题？

如何播放M3U8 格式的流视频

从抓包来看，还是libxml.js导入了弹幕文件。

这肯定是不能用JSON了。

但是从CommentCore来看应该是可以用JSON的。

希望啥时候写一个JSON的例子。。。