Videogular コントロールで問題が発生しました。インストールプロセスのいくつかのステップが欠けているに違いありません。いくつかの記号フォントを含める必要があると思いますが、それを見つける場所と含める方法がわかりません。
コントロールには画像/シンボル/フォントがないように見えます-代わりに空の長方形が表示されます(スクリーンショットを投稿するのに十分な評判がありません)。含まれているファイルは次のとおりです。
"/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"
そしてコントローラーコード：
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 %}