关于字幕的显示问题
Closed this issue · 13 comments
作者大大，在您的播放器开发完成之前，可不可以在现在的播放器中加入字幕半透明的背景，类似YouTube那样的。因为现在字幕是白色的，遇到浅色背景时观看体验就变得不好了。这个功能对于我来说很需要，谢谢🙏
播放器字幕的颜色是可以自定义的，这个暂时没加到配置里面，这样吧，就让他跟随主题色走吧
不好意思，可能是我对问题描述的不是很清楚。是这样的，下面的图片是现在的情况。
由于字幕是白色的，动画背景是白色的，没有其他颜色做分割，字幕看起来会很吃力。我的意思不是改变字幕的颜色，假如字幕是黄色的，动画背景也是黄色的，也会有这样的问题。
我想有两种解决这个问题的办法，一种是类似于YouTube，在字幕后加半透明的背景。像下面这张图片。
第二种类似于Bilibili可以给字幕描边，这样可以区分背景色。像下面这张图片。
目前来说，第一种应该很容易实现。像BILIBILI这种，希望作者大大可以考虑加入到自己开发的播放器功能中。
有空我研究下dplayer的字幕, 这个播放器很长时间内都不会改了, 我自己的播放器其实字幕弹幕功能都OK了, 字幕的颜色也能自由选择, 应该说功能抄的就是B站, 但是没经过长时间的测试也不会上的, 毕竟坑太多, 移动端的样式也很难去兼顾到
另外还在考虑做ass这些字幕的解析, 毕竟webvtt没啥样式, 很单调, 就是不知道啥时候能最终完成
Dplayer应该可以修改这里的样式，但是怎么在qinvideo中修改，我就没研究明白了，所以还是需要请教您了。
直接在页面中找到他的样式, 然后在html里面的全局应用就好
重写的播放器目前完成了web端大部分的功能, 不知道你有没有啥建议, 预计过段时间就会在我的站点先行尝试了;
太好了，请问有链接可以试用一下吗？
这个暂时没有, 还在开发中, 还有一些问题没解决, 基础功能都差不多了
感觉播放功能已经很不错了，功能很全。我可能对字幕要求稍微高一些，毕竟网上这么多视频CMS几乎没有太多有良好的字幕体验。我平时看视频用potplayer，这个播放器对字幕的处理感觉就很完美。下图是效果以及默认字幕设置。这里使用的vtt格式的字幕。
我感觉达到这种效果应该可以控制这些参数：字体、字号、字色、描边宽度、描边颜色、阴影方向、阴影深度、阴影颜色。
作者您说过想要支持ASS字幕，我感觉这个难度有些大。虽然ASS字幕的样式很漂亮，但ASS字幕的样式过于复杂，很多ASS字幕需要外挂很多字体，还有些字幕里有运动追踪，这些实现起来应该都很难。当然仅仅使用一些简单样式应该是不难的。这个网站可以参考一下：https://ass.js.org/
以上就是我对播放器的建议，加油！
VTT的样式实现你上图是完全没问题的, 但是关键还是在于播放器内部的空间太少, 放不下太多的设置项, 所以也在考虑究竟是把这些样式给站长设置, 还是让用户能够手动去选择, 交互上也是需要去打磨的, 如果你有更好的想法, 可以画点原型图来讨论下思路, 目前我就是简单的抄袭了下B站..........
ASS这个就是先定个目标吧, HTML5播放器的缺陷主要是功能孱弱以及支持的格式太少, 格式的话目前有flv.js, hls.js, 基本上能满足大部分的需求, 现在基本上都是hls, 问题也不是很大;
弹幕这个也在思考, 如何能实现大量的弹幕而不导致页面卡顿, 这个是一个很有意思的点;
字幕这个我其实是比较感兴趣的, 因为HTML5播放器很少有专门去做这方面的, 目前还没有深入研究, 但是从技术上来说, 应该没有什么是JS做不了的, CSS动画不行还可以上SVG或者canvas, 毕竟现在的web动效确实有点没地方用的感觉, 这方面应该很能锻炼技术;
目前像西瓜, 知乎这些播放器其实都是从编码解码这些入手的, 他们会对mp4进行更加详细的研究, 如何加载速度更快, 分片加载等等, 而不是简单的在video上套个div, 这个也是以后需要深入的点;
所以规划嘛, 先放远一点, 这个是长期项目, 完成时间未知, 此外还有视频切片转码的工具也在同步开发中, 这些都是为视频做技术储备;
我感觉播放器上就只放一些功能开关就行，详细的播放器配置可以放在用户设置里，生成一个配置数据保存下来。不同的用户登录时自动加载不同的播放器配置，这样就不用每次观看视频时都要调整配置。站长可以设置一个缺省配置，用于未注册用户和那些对于播放器无所谓的用户。这些是我的想法，不知道是否可行，供您参考一下。
其实对于播放器上的交互，可以参考一下youtube的播放器，它的多字幕选择，还有字幕翻译功能都很好。不过这种外挂字幕在移动端全屏时，就失去了这个字幕功能了。
不过我看到一个站实现移动端全屛看视频也能有字幕，它是把手机在竖屏时禁用了全屏功能，当手机横屏时，播放器可以使用页面全屏的方式，这样相当于能全屏观看视频，同时也保证字幕存在。