https://www.gumi.co.jp/20th/assets/js/video.js?v=20260409

1$(function () {
2  var viewer = new Viewer({
3    dom: $("#video"),
4    clip: "VideoClip",
5    zoomInCustom: function (dt) {
6      viewer.nowData = dt;
7      var cushion = cushions.find(function (item) {
8        return item.id === dt.cushion;
9      });
10      dt.face = {
11        eye: cushion.eye,
12        mouse: cushion.mouse,
13      };
14
15      viewer.createBalloon(dt);
16
17      playSE("se_tap_ok");
18      //   pauseBGM(true);
19      //   ytplayer.init(dt.video_id);
20    },
21    zoomOutCustom: function () {
22      //   pauseBGM(false);
23      //   ytplayer.removeVideo("");
24    },
25
26    // bgm: "bgm_photo",
27    openVoice: {
28      text: "20周年の記念映像です。もうご覧になりました？",
29      cushion: "cushion_14",
30      face: {
31        eye: "neutral",
32        mouse: "talk_smile",
33      },
34    },
35    closeCustom: function () {
36      if (viewer.player) {
37        viewer.player.pauseVideo();
38        viewer.player = null;
39      }
40    },
41  });
42
43  $.get(
44    "./assets/data/video.csv?" + Math.random(),
45    function (data) {
46      var csv = $.csv.toArrays(data);
47      csv.shift();
48      var data = [];
49      for (var i in csv) {
50        if (csv[i][0]) {
51          var dt = {
52            id: csv[i][0],
53            video_id: csv[i][1],
54            title: csv[i][2],
55            text: csv[i][3],
56            cushion: csv[i][4],
57          };
58          data.push(dt);
59        }
60      }
61      viewer.init(data);
62    },
63    "text",
64  );
65});
66
67function VideoClip(data, viewer) {
68  var html = "";
69  html += '<div" class="item">';
70
71  if (data.video_id) {
72    html += "<div class='video' id='v_" + data.id + "'></div>";
73  } else {
74    html += '<div class="coming"></div>';
75  }
76
77  html += '<div class="title">' + data.title + "</div>";
78  html += '<div class="text">' + data.text + "</div>";
79  html += "</div>";
80
81  var obj = $(html);
82  obj[0].data = data;
83  obj[0].viewer = viewer;
84
85  if (obj[0].data.video_id) {
86    obj[0].ytplayer = new YoutubePlayer("v_" + obj[0].data.id, viewer);
87    setTimeout(function () {
88      obj[0].ytplayer.init(obj[0].data.video_id);
89    }, 100);
90  }
91
92  return obj;
93}
94
95function YoutubePlayer(container, viewer) {
96  var obj = {};
97
98  obj.container = container;
99  obj.viewer = viewer;
100
101  obj.init = function (videoID) {
102    obj.player = new YT.Player(obj.container, {
103      videoId: videoID,
104      playerVars: {
105        autoplay: 0,
106        controls: 1,
107        rel: 0,
108        start: 0,
109        modestbranding: 1,
110        showinfo: false,
111      },
112      events: {
113        onReady: function (event) {},
114        onStateChange: function (event) {
115          if (event.data === YT.PlayerState.PLAYING) {
116            if (
117              obj.viewer.player &&
118              obj.container != obj.viewer.player.container
119            ) {
120              obj.viewer.player.pauseVideo();
121            }
122            obj.viewer.player = obj;
123          }
124        },
125        onError: function (e) {
126          console.log("error");
127        },
128      },
129    });
130  };
131
132  obj.playVideo = function () {
133    obj.player.playVideo();
134  };
135
136  obj.pauseVideo = function () {
137    obj.player.pauseVideo();
138  };
139
140  return obj;
141}