videojs / font Goto Github PK
View Code? Open in Web Editor NEWIcon font used for Video.js
Home Page: https://videojs.github.io/font/
License: Apache License 2.0
Icon font used for Video.js
Home Page: https://videojs.github.io/font/
License: Apache License 2.0
need a close button without background. can you please add the close button font for video js?
I using videojs 5.3.0 on a webview of android 4.2.
Pause icon dose not display, but play icon, volume mute icon is display.
I changed css file, using volume icon instead pause icon and it is displayed.
Please check thi problem.
It should be documented that new icons should be added to the end of the list in icons.json
. If not, it'll shift codepoints for existing icons, which we want to avoid.
The audio description icon used to be \f114
and now it's \f11d
. What's the best way to build an external plugin using an icon from this package without relying on these mappings?
Hi, Could you add Loop icon to the font?
I created a button plugin to allow disable/enable loop
repeat
and repeat_on
icons
/* eslint-disable */
import videojs from 'video.js';
const Button = videojs.getComponent('Button');
const Component = videojs.getComponent('Component');
export default class LoopToggle extends Button {
constructor(player, options = {}) {
super(player, options);
}
ready() {
this.onIcon = this.$('.vjs-loop-on-icon');
this.offIcon = this.$('.vjs-loop-off-icon');
this.toggleIcon();
}
toggleIcon() {
const isOn = this.player_.loop();
this.onIcon.style.display = isOn ? '' : 'none';
this.offIcon.style.display = isOn ? 'none' : '';
}
buildCSSClass() {
return `vjs-loop-control ${super.buildCSSClass()}`;
}
handleClick(event) {
this.player_.loop(!this.player_.loop());
this.toggleIcon();
}
createEl(tag, props = {}, attributes = {}) {
tag = 'button';
props.innerHTML = `
<span aria-hidden="true" class="vjs-icon-placeholder">
<i class="material-icons-round vjs-loop-off-icon" style="display: none;">repeat</i>
<i class="material-icons-round vjs-loop-on-icon" style="display: none;">repeat_on</i>
</span>`;
props.className = this.buildCSSClass();
attributes = {
type: 'button',
...attributes,
};
const el = Component.prototype.createEl.call(this, tag, props, attributes);
this.createControlTextEl(el);
return el;
}
}
LoopToggle.prototype.controlText_ = 'Toggle Loop';
Component.registerComponent('LoopToggle', LoopToggle);
Although the existing audio description icon is the standard one (and the one I suggested!), it's in the same style as the more conventional CC button. There isn't a suitable audio description icon in the Material Design library, but I'm sure someone could make one. The obvious thing would be to just do the letters 'AD' like the 'CC' icon, but it would be very close to the 'HD' icon.
So I'm opening this issue for suggestions/ideas?
hi
Please correct your LICENSE.
https://github.com/videojs/font/blob/master/LICENSE#L189
thank you :)
Plugin authors can add buttons and other elements that contain custom icons. Currently I've copied most of the code in this repository in order to produce a custom font. Is it possible to make a reusable plugin that is also compatible with non-ES6 code? I'm willing to help with a PR but some guidance would be useful.
With the --custom-json
option I get all video.js + my custom icons, although I don't need the default video.js icons since they're already loaded by video.js itself.
I would like to limit it to the icons defined in the custom json file.
cc @199911
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
Hi,
Please add the download icon from Material Design.
Thanks,
Robert
In similar spirit to videojs/video.js#1880.
@each $name, $content in $icons {
.vjs-icon-#{$name} {
font-family: $icon-font-family;
font-weight: normal;
font-style: normal;
&:before {
content: char($content);
}
}
}
https://github.com/videojs/font/blob/master/scss/_icons.scss#L74
The code above specifies the font-family
for every icon—making overriding difficult. My recommendation would be to separate that out and have a mixin be created to include the font-family
and associated props only when needed.
For controls such as play/pause or volume-0/volume-1/volume-2/volume-3, it really only requires the inclusion of the font-family
on the control button. However, due to specificity rules I need to override everyone of them.
/// @name VideoJS Volume
:global(.vjs-volume-menu-button)
{
:global(.video-js) &
{
@include icon-font;
&::before
{
content: $icon-volume-3;
}
&:global(.vjs-vol-0)
{
@include icon-font;
&::before
{
content: $icon-volume-off;
}
}
&:global(.vjs-vol-1)
{
@include icon-font;
&::before
{
content: $icon-volume-1;
}
}
&:global(.vjs-vol-2)
{
@include icon-font;
&::before
{
content: $icon-volume-2;
}
}
}
}
Definitely not a 1:1 translation, but this is the way I manage custom icons.
/// Icon Font: <%= font_name %>
/// Font-face styles
@mixin icon-font-face {
<%= font_face(path: @font_path_alt) %>
}
/// Font styles
@mixin icon-font {
<%= glyph_properties %>
}
/// Font glyph
@mixin icon-glyph {
<%= glyphs %>
}
/// Font variables
<% @glyphs.each do |name, value| %>
$icon-<%= name.to_s %>: "\<%= value[:codepoint].to_s(16) %>";<% end %>
I then have the flexibility to only include icon-font
when necessary. Additionally, I need to add the appropriate content: $icon-{name}
.
Please add Next Previous icons
Like |◄ ►|
Babel version 6.1.18 causes GRUNT to fail build. Changing in package.json
"babel": "5.4.7",
resolves issue.
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.