カスタマイズ

デザイン

プレイリスト

説明

プレイリストのデザインを設定します。

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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

results matching ""

No results matching ""