カスタマイズ
デザイン
プレイリスト
説明
プレイリストのデザインを設定します。
CSS
| class名 | 説明 |
|---|---|
| .vjs-playlist-thumbnail | サムネイルのイメージスタイルを設定します。 |
| .vjs-playlist-name | プレイリストアイテムのタイトルスタイルを設定します。 |
| .vjs-selected img | 現在再生中のプレイリストアイテムのイメージスタイルを設定します。 |
| .vjs-selected .vjs-playlist-now-playing-text | 現在再生中のプレイリストアイテムのテキストスタイルを設定します。 |
| .vjs-up-next-text | 次回再生するプレイリストアイテムのテキストスタイルを設定します。 |
JavaScript
| 関数名 | 説明 |
|---|---|
| setupPlaylistUi | プレイリストをカスタマイズするための関数です。 |
コードサンプル
プレイリストのCSSスタイルを定義します
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- ここではレイアウトの構築にCSSフレームワークのBootstrapを利用しています。 -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://player-cdn.videog.jp/r/js/videog_player/2.2.11/videogplayer/videogplayer.min.css" rel="stylesheet">
<style>
/* サムネイル イメージ スタイル */
#videog-playlist.vjs-playlist .vjs-playlist-thumbnail {
display: block;
}
/* アイテムのタイトルスタイル */
#videog-playlist.vjs-playlist .vjs-playlist-name {
display: block;
}
#videog-playlist.vjs-playlist .vjs-selected {
background-color: rgba(0, 0, 0, 0.2);
}
/* 現在再生中のアイテムのスタイル */
#videog-playlist.vjs-playlist .vjs-selected img {
opacity: .5;
}
/* 現在再生中のアイテムを表示するテキストのスタイル */
#videog-playlist.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text {
display: block;
}
/* 次回再生するアイテムを表示するテキストのスタイル */
#videog-playlist.vjs-playlist .vjs-up-next-text {
font-size: .8em;
}
</style>
</head>
<body>
htmlにプレイリストを配置するdivを追加します
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="container center-block">
<div class="row">
<h2>Videog Playlist UI Exmaple</h2>
</div>
<div style="margin-bottom: 20px">
<div class="row" style="margin-top:5px;">
<div class="col-md-7 col-md-offset-1 col-xs-12" style="margin-bottom:10px;">
<div id="custom_video_player"></div>
</div>
<div class="col-md-4 col-xs-11">
<div id="videog-playlist" class="vjs-playlist" style="height: 360px;"></div>
</div>
</div>
</div>
</div>
setupPlaylistUi関数にプレイリストを配置するタグのidをパラメータに設定します
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
const options = {
skin: "hard_blue",
play_list: [
{
...
}
...
]
...
};
const player = videogplayer('video_tag_id', options, function onPlayerReady() {
console.log('Videog Player is ready!');
player.setupPlaylistUi('videog-playlist');
});
</script>