用户登录

播放器上的这些控制你可以决定要使用哪些 ... 默认会全部显示在这里 .. 在它的配置对象里面 .. 添加一个 controls 选项.. 它的值是一个数组 .. 数组里的东西就是想要使用的控制 .. 比如先添加一个 play-large ..

现在播放器上只会显示一个大的播放按钮 .. 再添加一个 play .. 它就是这个小的播放按钮 .. 再添加一个 progress .. 它是这个播放进度 ..

current-time .. 会显示视频当前播放到的时间 .. 视频没播放的时候,这里会显示视频的长度 .. mute .. 是这个声音的开关 ..

控制音量,可以使用一个 volume ... 字幕的开关是这个 captions ...

还有一个全屏幕的按钮,名字是 fullscreen ... 你可以决定到底使用哪个控制,把它们的名字放在 controls 这个选项里就行了 ...

这些按钮上面会有一些标签 .. 这些标签对于使用屏幕阅读器的用户来说非常重要 .. 如果打开了控制栏的按钮的工具提示 .. 鼠标放在上面的时候,也会显示这些标签上的文字 ..

默认它是英文的,我们可以翻译一下这些按钮上的标签 ... 在 Plyr 播放器的仓库里面提供了一个翻译的模板 .. 复制一下它 .. 把它粘贴到播放的配置选项里 ..

比如我们修改一下 Play 这个按钮上的文字 .. 中文是 播放 .. 保存 .. 鼠标放在这个播放按钮上 .. 会显示中文的 播放 ...

你可以使用这种方法去翻译一下其它按钮上的文字 ..

如果你想完全的控制播放器的控制栏,可以定制一下它,然后告诉 Plyr 使用我们自己定制的控制栏 .. Plyr 同样给我们提供了一个控制栏模板 ..

就是这个 controls .. 复制一下 ... 把它粘贴到我们的脚本里面 ... 然后在配置选项里面,添加一个 html 选项 .. 它的值就是自定义的控制栏 .. 这里就是 controls ...

有了这个自定义的控制栏,我们可以就不需要这个 controls 了 .. 下面这个 i18n 也可以去掉 ...

保存一下 ..

现在你看到的就是定制之后的播放器 .. 上面多了几个按钮 .. 比如这个 重新播放 ... 还有这个快进 .. 快退按钮 ..

你可以修改这个 controls ,让它符合我们自己的设计 ...

播放器上的按钮《 Plyr 播放器 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点