https://www.wdb.com/js/mediakind/modal.js

1$(document).ready(function () {
2  // ビデオコンテナを準備
3  const videoContainer = document.getElementById("video-container");
4
5  // プレイヤーの設定を準備
6  const playerConfig = {
7    key: "d0167b1c-9767-4287-9ddc-e0fa09d31e02",
8    ui: true, // UIを有効にする
9    // 再生設定
10    playback: {
11      autoplay: true, // 自動再生オン
12      playsInline: false, // iOS等で全画面表示にする
13    },
14  };
15
16  // ビデオコンテナとプレイヤー設定でプレイヤーを初期化
17  let player = new mkplayer.MKPlayer(videoContainer, playerConfig);
18
19  // iPhoneかどうかを判断する関数
20  function isiPhone() {
21    return /iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
22  }
23
24  player.on(mkplayer.MKPlayerEvent.SourceLoaded, () => {
25    // SourceLoadedイベントが発生した際に、iPhoneの場合のみvideo要素にcontrols属性を追加する
26    if (isiPhone()) { // iPhoneの場合
27      const videoElement = videoContainer.querySelector("video");
28      if (videoElement) {
29        videoElement.controls = true; // controls属性を付与
30      }
31
32      // SourceLoadedイベントが発生した際に、iPhoneの場合のみis-iphoneクラスを付与
33      $('.bmpui-ui-controlbar').addClass('is-iphone');
34      $('.bmpui-ui-titlebar').addClass('is-iphone');
35      $('.bmpui-image').addClass('is-iphone');
36      $('.bmpui-ui-playbacktoggle-overlay').addClass('is-iphone');
37    }
38  });
39
40  $('.c-modal-open').each(function () {
41    $(this).on('click', function () {
42      // モーダル用
43      var target = $(this).data('target');
44      var modal = $('#' + target);
45      $(modal).addClass('is-active');
46      scroll = $(window).scrollTop();
47      $('body').css({
48        'left': 0,
49        'overflow': 'hidden scroll',
50        'position': 'fixed',
51        'top': -1 * scroll,
52        'width': '100%'
53      });
54      // 動画再生用
55      var src = $(this).data('src'); // HTMLからHLS形式の動画URLを取得
56      console.log(src);
57      const sourceConfig = {
58        hls: src, // HLS形式の動画URL
59      };
60      // ソースを読み込み
61      player.load(sourceConfig);
62      return false;
63    });
64  });
65
66  $('.c-modal-close').each(function () {
67    $(this).on('click', function () {
68      // モーダル用
69      $('.p-video-modal').removeClass('is-active');
70      $('body').removeAttr('style');
71      $('html, body').prop({ scrollTop: scroll });
72
73      // 動画再生用
74      // モーダルを閉じた時に動画の再生を止める
75      if (player) {
76        player.unload();
77      }
78      return false;
79    });
80  });
81
82  // 動画視聴ログ処理
83  let logpoint_array = [
84    { "percentage": 0.01, "change_column": "start_count", "complete": false },
85    { "percentage": 25, "change_column": "firstpoint_count", "complete": false },
86    { "percentage": 50, "change_column": "midpoint_count", "complete": false },
87    { "percentage": 75, "change_column": "thirdpoint_count", "complete": false },
88    { "percentage": 100, "change_column": "end_count", "complete": false }
89  ];
90
91  let not_use_ajax;
92
93  if (typeof data === "undefined" || Object.keys(data).length === 0) {
94    var ajax_data = [];
95  } else {
96    var ajax_data = data;
97  }
98
99  if (typeof use_logpoint != "undefined" && Object.keys(use_logpoint).length > 0) {
100    player.on(mkplayer.MKPlayerEvent.TimeChanged, (event) => {
101      const duration = player.getDuration();
102      let currentTime = player.getCurrentTime() + 1;
103      let percentage = (currentTime / duration) * 100;
104      let logpoint = logpoint_array.find((logpoint) => {
105        return percentage >= logpoint.percentage && !logpoint.complete;
106      });
107      if (logpoint) {
108        let index = logpoint_array.indexOf(logpoint);
109        let val = use_logpoint[index + 1];
110        ajax_data["change_column"] = logpoint_array[index]["change_column"];
111        logpoint_array[index].complete = true;
112        if (typeof not_use_ajax === "undefined" || !not_use_ajax) {
113          $.ajax({
114            url: val,
115            type: 'POST',
116            data: ajax_data,
117            headers: {
118              "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
119            },
120            timeout: 50000
121          }).done(function (data) {
122            if (logpoint_array[index]["percentage"] == 100) {
123              not_use_ajax = true;
124              if (typeof ajax_success == "function") {
125                ajax_success();
126              }
127            }
128          }).fail(function (jqXHR, textStatus, errorThrown) {
129            console.log("fail");
130            console.log(jqXHR);
131            console.log(textStatus);
132            console.log(errorThrown);
133          });
134        } else {
135          if (typeof ajax_success == "function" && logpoint_array[index - 1]["logpoint"] == "ended") {
136            ajax_success();
137          }
138        }
139      }
140    });
141  }
142});