Мануал Как смотреть YouTube прямо в игре на сервере RAGE:MP

MRX · 6 Фев 2022

В этом мануале расскажу как сделать просмотр ютуб видосиков прямо в игре, из этого можно сделать очень классный функционал

Тут вы увидите просто код HTML и взаимодействие с API YouTube

CEF код

HTML:

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '864', // разрешение видеопроигрывателя ютуба на странице
          width: '1440',
          videoId: 'EyC7bh37qus', // VideoID с ютуба, можно получить из ссылки https://www.youtube.com/watch?v=[B]O6yiC_PxhLY [/B]| O6yiC_PxhLY - будет VideoID
          playerVars: {
            'fs': 0, // убираем что бы игрок не мог баловаться с фулл скрином
            'disablekb': 1, // что бы не работали горячие клавиши по типу пробела
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo(); // тут на всякий случай 2 старта видео, лишним не будет
        player.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      function onPlayerStateChange(event) {
        if(event.data === YT.PlayerState.ENDED) { // если видео закончилось выключаем браузер игроку
          mp.events.call("cinema", [false]);
        }
      }
    </script>
  </body>
</html>

Это самая основная часть, если к ней прикрутить vue, то можно сделать полноценный функционал "кинотеатра" как на Majestic RP

Client-side

JavaScript:

var cinemaCEF;

mp.events.add("cinema", (state) => {
    if(state === true) {
        cinemaCEF = mp.browsers.new("package://cef/cinema/index.html"); // создаем CEF для начала проигрывания
    } else {
        if(cinemaCEF) { // если видео включено и его надо выключить просто удаляем дабы не засорять память
            cinemaCEF.destroy();
        }
    }
});

С серверной стороны мы просто делаем весь другой функционал, хотите - кинотеатр, хотите - просто через команду, синхронизацию с другими игроками думаю тоже сделать проблем не возникнет.
Для начала воспроизведение видео с определенного момента используем API функционал ютуба и добавляем аргумент startSeconds, и указываем с какой секунды надо начать воспроизведение видео.

Поиск

Мануал Как смотреть YouTube прямо в игре на сервере RAGE:MP

MRX

Активный участник