我遇到了视频控件的问题。我一定是在安装过程中遗漏了某些步骤。我想我需要包含一些符号字体，但不知道在哪里可以找到它以及如何包含它。
这些控件似乎没有图像/符号/字体 - 相反，我得到的是空矩形(这里没有足够的声誉来发布屏幕截图)。 以下是包含的文件:
"/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",
以下是传递给模块的内容:
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.poster"
Controller 代码:
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 )代码:
{% 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 %}
最佳答案
您需要更改此行:
vg-theme="controller.config.theme"
这样:
vg-theme="controller.config.theme.url"
关于javascript - 控制字体/符号丢失 - videogular，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30145630/