0

I ran into a a problem with videogular controls. I must be missing some step in the installation process. I guess I need to include some symbols font, but have no idea where to find it and how to include it.

The controls appear to have no images/symbols/fonts - instead I get empty rectangles (don't have enough of reputation here to post a screenshot). Here are the included files:

"/js/Vendors/videogular/videogular.min.js",
"/js/Vendors/videogular/vg-controls.min.js",
"/js/Vendors/videogular/vg-poster.min.js",
"/js/Vendors/videogular/vg-buffering.min.js",
"/js/Vendors/videogular/vg-overlay-play.min.js",

Here is what is passed to the module:

"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.poster"

And the controller code:

App.controller('Player',
    ["$sce", function ($sce) {
                    var controller = this;
        controller.API = null;

        controller.onPlayerReady = function(API) {
            controller.API = API;
        };

                    controller.fscreen=function(){
                        controller.API.toggleFullScreen();
                    };


        this.config = {
            sources: [
                {src: $sce.trustAsResourceUrl('http://'+document.domain+"/data/video/trailer.mp4"), type: "video/mp4"},
                {src: $sce.trustAsResourceUrl('http://'+document.domain+"/data/video/trailer.webm"), type: "video/webm"}                    
            ],
                            width: 1920,
                            height: 1080,      
                            responsive: true,

            theme: {
                                url:"http://www.videogular.com/styles/themes/default/latest/videogular.css",
                                playIcon: "",
                                pauseIcon: "",
                                volumeLevel3Icon: "",
                                volumeLevel2Icon: "",
                                volumeLevel1Icon: "",
                                volumeLevel0Icon: "",
                                muteIcon: "",
                                enterFullScreenIcon: "",
                                exitFullScreenIcon: ""
                            },

        };
    }]
);

HTML (Twig) code:

{% extends "base.html.twig" %}
{% block content %}   
    <controller-wrapper data-ng-controller="Transit as T">
    <controller-wrapper ng-controller="Player as controller">
    <videogular vg-player-ready="controller.onPlayerReady($API)" vg-theme="controller.config.theme">
    <div id="wrapper">
            {% include '/commons/header.html.twig' %}
            <main >  
                <div id="play" data-ng-click="T.transit=!T.transit;" data-ng-hide="T.transit">
                    <h1>Watch trailer</h1>
                    <p>(video pitch)</p>
                </div>
                <div  class="videogular-container" data-ng-show="T.transit" >
                                <vg-media vg-src="controller.config.sources">
                                </vg-media>
                                <vg-controls>
                                    <vg-play-pause-button></vg-play-pause-button>
                                    <vg-time-display>{{'{{ currentTime | date:"mm:ss" }}'}}</vg-time-display>
                                    <vg-scrub-bar>
                                            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                                    </vg-scrub-bar>
                                    <vg-time-display>{{'{{ timeLeft | date:"mm:ss" }}'}}</vg-time-display>
                                    <vg-volume>
                                            <vg-mute-button></vg-mute-button>
                                            <vg-volume-bar></vg-volume-bar>
                                    </vg-volume>
                                    <vg-fullscreen-button></vg-fullscreen-button>
                                </vg-controls>     
                </div>

            </main>
            <div id="push-footer"></div>
    </div>      
   {% include '/commons/footer.html.twig' %}
   </videogular>
   </controller-wrapper>
   </controller-wrapper>
{% endblock %}
Anastasia Sitnina
  • 551
  • 8
  • 24
  • Do you see any console errors? Probably you're using an old Videogular version and you should update to the latest version. See: http://www.videogular.com/tutorials/migration-guide-to-videogular-1-0-0/ – elecash May 10 '15 at 10:27
  • The version is 1.2.1 There are no errors in the console. And the playback is working - and you can play/pause it, it's just the images\symbols on the buttons that are missing – Anastasia Sitnina May 10 '15 at 11:10
  • Could you post your HTML? Maybe you're not setting properly the vg-theme attribute in videogular tag. – elecash May 10 '15 at 11:21
  • I've added the html (twig) code to my original post. – Anastasia Sitnina May 10 '15 at 11:47
  • Yeah, I think that this `vg-theme="controller.config.theme"` should be `vg-theme="controller.config.theme.url"`. – elecash May 10 '15 at 18:29
  • Fantastic! Thank you! Strangely enough that's how they had it in the tutorial [link](http://www.videogular.com/tutorials/how-to-start/) I will be happy to mark it as a correct answer if you write it as one below. It actually solved both problems I've had - if you want to post it as an answer here - [link](http://stackoverflow.com/questions/30146285/videogular-crops-video-rather-than-resizing) I will be happy to mark it too. – Anastasia Sitnina May 10 '15 at 18:53
  • Fixed! http://www.videogular.com/tutorials/how-to-start/ I will write right now the answer. – elecash May 11 '15 at 11:02
  • The tutorial still looks the same to me with `vg-theme="controller.config.theme"` in all the code samples. Maybe the templates were cached in the previous state 'though? – Anastasia Sitnina May 12 '15 at 11:56

2 Answers2

1

You need to change this line:

vg-theme="controller.config.theme"

By this: 

vg-theme="controller.config.theme.url"
elecash
  • 925
  • 7
  • 11
0

You need to install the videogular-themes-default plugin along with your other plugins. The tutorial page is here: http://www.videogular.com/tutorials/how-to-start/

fuzzy marmot
  • 373
  • 4
  • 10