Web サイトに Videogular を実装しようとしていますが、GitHub プロジェクトのダウンロードに伴うすべてのものはありません。videogular.js、プラグイン、およびデフォルトのテーマのみを使用したい。ただし、ページを読み込むと、デフォルトの HTML5 ビデオ プレーヤーと Videogular が実装されていません。
私のhtmlコードは次のようになります:
<html ng-app="myapp">
<head>
<script src="angular.min.js"></script>
<script src="jquery-2.0.3.min.js"></script>
<script src="videogular/videogular.js"></script>
<script src="videogular/plugins/controls.js" type="text/javascript"></script>
<script src="videogular/plugins/overlay-play.js" type="text/javascript"></script>
<script src="videogular/plugins/buffering.js" type="text/javascript"></script>
<script src="videogular/plugins/poster.js" type="text/javascript"></script>
<script src="videoserve.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body ng-controller="MyController">
<div id="videoDiv">
<videogular vg-responsive="config.responsive" vg-autoPlay="config.autoPlay">
<video class='videoPlayer' controls preload='metadata'>
<source src='assets/videos/Test 1080p HD.mp4' type='video/mp4'>
</video>
<vg-poster-image vg-url='config.plugins.poster.url' vg-stretch="config.stretch.value"></vg-poster-image>
<vg-buffering></vg-buffering>
</videogular>
</div>
</body>
</html>
そして私のjsファイルは次のようになります：
var app = angular.module('myapp', [
]);
app.controller('MyController', function($scope) {
$scope.stretchModes = [
{label: "None", value: "none"},
{label: "Fit", value: "fit"},
{label: "Fill", value: "fill"}
];
$scope.config = {
width: 740,
height: 380,
autoHide: false,
autoPlay: true,
responsive: false,
stretch: $scope.stretchModes[0],
transclude: true,
theme: {
url: "videogular/default/videogular.css",
playIcon: "",
pauseIcon: "",
volumeLevel3Icon: "",
volumeLevel2Icon: "",
volumeLevel1Icon: "",
volumeLevel0Icon: "",
muteIcon: "",
enterFullScreenIcon: "",
exitFullScreenIcon: ""
},
plugins: {
poster: {
url: "assets/images/logo.png"
}
}
};
});
欠けているものは何も見えません。スコープ内に構成オブジェクトとテーマセットがあります (これは明らかに必須です)。私に見えない何かを見ている人はいますか？
編集:気にしないでください。含めるのを忘れていたngSantizeことがわかりました.jsファイルをhtmlヘッダーに追加しています。