Hey guys,
I’m trying to add an HTML5 video wrapper called Videogular to my ionic 3 app. Everything is working fine except for the icons. The guys at Videogular have their own icon fonts and corresponding scss file that defines how the player looks. These are placed in the videogular directory under node modules. How do I get them to work with my ionic app i.e in my component’s scss file. Any help is greatly appreciated.
Thanks
You should be able to import them in app.scss.
Found the solution. I’ll post it here in case any one else faces the same problem.
Here’s what I did:
1 Navigated to node_modules\videogular2\fonts\videogular.css and changed the file name to videogular.scss
2 Edited the file and modified it as follows:
$vg-font-path: $font-path !default;
@font-face {
font-family: "videogular";
src: url("#{$vg-font-path}/videogular.eot?hj1wei");
src: url("#{$vg-font-path}/videogular.eot?hj1wei#iefix") format('embedded-opentype'),
url("#{$vg-font-path}/videogular.ttf?hj1wei") format('truetype'),
url("#{$vg-font-path}/videogular.woff?hj1wei") format('woff'),
url("#{$vg-font-path}/videogular.svg?hj1wei#videogular") format('svg');
font-weight: normal;
font-style: normal;
}
the rest of the code remains as it was.
3 Navigated to ‘node_modules@ionic\app-scripts\config\copy.config.js’ and added my the fonts folder (i.e the videongular fonts) as follows:
copyFonts: {
src: ['<pre-existent code here>', '{{ROOT}}/node_modules/videogular2/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
}
4 Navigated to ‘node_modules@ionic\app-scripts\config\sass.config.js’ and added the aforementioned fonts folder to ‘includePaths’ as follows:
includePaths: [
<pre-existent code here>,
'node_modules/videogular2/fonts',
]
5 Finally navigated to the ‘src/theme/variables.scss’ file and added the following line at the bottom:
@import 'videogular';
and then I was all set.
Hope this helps someone else.
Thanks @rapropos for your contibutions though.
Please do not follow the above advice. Editing anything under node_modules is a very bad idea. npm owns that directory, and it will blow away your modifications.
Please advise on how you would handle it.
If a straight import in app.scss is insufficient, I would use the app-scripts customization documented here.
Thank you @rapropos
This is actually safer and cleaner. I just need to move the changes from the node_modules files to my own files outside that folder and use the ‘config’ property in ‘package.json’ to point to the new files.
OK - I got it going using the following procedure - this is based on Rapropos’ and Gizm0’s advice - just adding this for anyone that may find it useful…
1 - Create folder: ‘scripts’ with files ionic.copy.config.js and ionic.sass.config.js
These are copies of the @ionic/app-scripts/config folder, changed as follows:
ionic.copy.config.js
...
copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*',
'{{ROOT}}/videogular2_scripts/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
...
Ionic.sass.config.js:
....
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'videogular2_scripts/fonts'
],
...
2 - Create folder 'videogular2_scripts containing a copy of the fonts folder (including folder). Rename videogular.css to videogular.scss and change the code at the beginning to:
$vg-font-path: $font-path !default;
@font-face {
font-family: "videogular";
src: url("#{$vg-font-path}/videogular.eot?hj1wei");
src: url("#{$vg-font-path}/videogular.eot?hj1wei#iefix") format('embedded-opentype'),
url("#{$vg-font-path}/videogular.ttf?hj1wei") format('truetype'),
url("#{$vg-font-path}/videogular.woff?hj1wei") format('woff'),
url("#{$vg-font-path}/videogular.svg?hj1wei#videogular") format('svg');
font-weight: normal;
font-style: normal;
}
...
(as revealed in the initial post solution).
3 - In package.json, add
...
},
"config": {
"ionic_sass": "./scripts/ionic.sass.config.js",
"ionic_copy": "./scripts/ionic.copy.config.js"
},
...
4 - In theme/variable.css, add to the bottom:
@import "videogular";
Gizm0 thanks for contributing it’s very helpful for me
Thanks for your post, it helped me a lot!
For anyone else with the same problem, I have a working implementation of Ionic, Videogular and Crosswalk here:
Hi Ronandoherty,
thx for sharing. Your demo works fine but when I try to get videogular integrated in my current project (newest Ionic)
I can’t get it work. I get the error that ng-video is not know.
Could you maybe make a short description of the steps needed for integrating?
thx,
patrik
Hi for all,
I made a plain app and from what I can see it doesn’t work with lazy load. If you don’t use lazy load everyting works.
patrik
Edit: I mentioned in a SideMenu - I Meant to say in a project using SplitPane.
Anyone have any luck getting fullscreen to work in an Ionic SplitPane project?
For me. fullscreen produces a white page or displays anything I have on the index.html.
Hello, can you please share how you get Videogular to work in ionic 3 app. I tried to stream with videogular and it does not display anything
Hi Patrickd,
The input comes a bit late but it might be useful to others.
If you follow RonanDoherty implementation and make the imports of videogular2 in the .module file of the page that will use it (and not in the app.module.ts), Videogular2 plays fine but the icons of the vg-controls don’t display correctly (only squares appear), which leaves the question of this thread open for lazy loaded ionic3 apps.
I get the following error:
GET http://localhost:8100/build/videogular.woff?hj1wei net::ERR_ABORTED
GET http://localhost:8100/build/videogular.ttf?hj1wei net::ERR_ABORTED
Any input on that is appreciated.
cheers
// Edit –
I had to play a bit with the paths and naming of files, but I got it to work mixing the solution from @dbertels and @ronandoherty. Thanks guys for the input.
So videogular2 works with Ionic3 and lazy loading.
I use more simple procedure:
1 copy ng-modules videogular2 fonts to assets/fonts
2 add @import “/src/assets/fonts/videogular.css”; to app.scss
hi, how to play video which is stored in internal storage, and play in videogular2 player in ionic3.
I am bit frustrated to finding solution for this.
can you please tell, how to play this video which is downloaded internal storage for android and ios.
I find @Gizm0 's solution to be easiest to follow. Thanks!
Getting the SCSS is just one part of making videogular2 work, please see my comment here: https://github.com/videogular/videogular2/issues/590
did it works same issue