控制字体/符号缺失 - videogular [英] Controls font/symbols missing - videogular
本文介绍了控制字体/符号缺失 - videogular的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到了与videogular控件的一个问题。我必须失去了在安装过程中的一些步骤。我想我需要包括一些符号字体，但不知道在哪里可以找到它，并如何将其纳入。
的控制似乎没有图像/符号/字体 - 而不是我得到空矩形（没有足够的信誉此处发布的截图）。
下面是包含的文件：
/ JS /供应商/ 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
下面是被传递到模块：
ngSanitize
com.2fdevs.videogular
com.2fdevs.videogular.plugins.controls
com.2fdevs.videogular.plugins.overlayplay
com.2fdevs.videogular.plugins.poster
和控制器code：
App.controller（'球员'，
[$ SCE功能（$ SCE）{
VAR控制器=这一点;
controller.API = NULL; controller.onPlayerReady =函数（API）{
controller.API = API;
}; controller.fscreen =功能（）{
controller.API.toggleFullScreen（）;
};
this.config = {
来源：[
{SRC：$ sce.trustAsResourceUrl（'HTTP：//'+document.domain+/data/video/trailer.mp4），键入：视频/ MP4}，
{SRC：$ sce.trustAsResourceUrl（'HTTP：//'+document.domain+/data/video/trailer.webm），键入：视频/ WEBM}
]
宽度：1920年，
高度：1080，
回应：真的， 主题：{
网址：http://www.videogular.com/styles/themes/default/latest/videogular.css
playIcon：与＆amp;＃xe000;，
pauseIcon：与＆amp;＃xe001;，
volumeLevel3Icon：与＆amp;＃xe002;，
volumeLevel2Icon：与＆amp;＃xe003;，
volumeLevel1Icon：与＆amp;＃xe004;，
volumeLevel0Icon：与＆amp;＃xe005;，
muteIcon：与＆amp;＃xe006;，
enterFullScreenIcon：与＆amp;＃xe007;，
exitFullScreenIcon：与＆amp;＃xe008;
}， };
}]
）;
HTML（枝）code：
{％伸出base.html.twig％}
{％块含量％}
＆LT;控制器封装数据-NG-控制器=交通为T＆GT;
＆LT;控制器包装NG控制器=Player作为控制器＆GT;
＆LT; videogular VG-玩家准备=controller.onPlayerReady（$ API）VG-主题=controller.config.theme＆GT;
＆LT; DIV ID =包装＆GT;
{％包括/commons/header.html.twig'％}
＆lt;主＆GT;
＆LT; DIV ID =玩的数据-NG-点击=T.transit = T.transit;！数据-NG-隐藏=T.transit＆GT;
＆LT; H1＆GT;观看预告片＆LT; / H1＆GT;
＆所述p为H.;（视频节距）所述; / P＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =videogular容器数据-NG-秀=T.transit＆GT;
＆LT; VG-媒体VG-SRC =controller.config.sources＆GT;
＆LT; / VG-媒体＆GT;
＆LT; VG-控制＆GT;
＆LT; VG-播放暂停按钮＆GT;＆LT; / VG-播放暂停按钮＆GT;
＆LT; VG-时间显示＆GT; {{'{{currentTime的|日期：MM：SS}}'}}＆LT; / VG-时间显示＆GT;
＆LT; VG-磨砂酒吧＆GT;
＆LT; VG-擦洗酒吧电流时间＆gt;＆LT; / VG-擦洗酒吧电流时间＆gt;
＆LT; / VG-擦洗酒吧＆GT;
＆LT; VG-时间显示＆GT; {{'{{的timeleft |日期：MM：SS}}'}}＆LT; / VG-时间显示＆GT;
＆LT; VG-体积GT;
＆LT; VG-静音按钮＆GT;＆LT; / VG-静音按钮＆GT;
＆LT; VG-卷棒＆GT;＆LT; / VG-卷棒＆GT;
＆LT; / VG-体积GT;
＆LT; VG-全屏按钮＆GT;＆LT; / VG-全屏按钮＆GT;
＆LT; / VG-控制＆GT;
＆LT; / DIV＆GT; ＆LT; /主＆GT;
＆LT; DIV ID =推躯＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
{％包括/commons/footer.html.twig'％}
＆LT; / videogular＆GT;
＆LT; /控制器封装＆GT;
＆LT; /控制器封装＆GT;
{％端块％}
解决方案
您需要更改此行：
VG-主题=controller.config.theme
通过这样：
VG-主题=controller.config.theme.url
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 %}
解决方案
You need to change this line:
vg-theme="controller.config.theme"
By this:
vg-theme="controller.config.theme.url"
这篇关于控制字体/符号缺失 - videogular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
