How do I get the following syntax to shuffle YouTube videos with the Dynamic Text Plugin?

Raphealtony commented 5 months ago

https://html.cafe/x52142732?k=7d3c8d433d7c137b7ff3e1aca34ed9c0acdfe781

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shuffle YouTube videos</title>
</head>

<body>
  <h1>Shuffle YouTube videos</h1>

  <div id="player"></div>

  <script>
    var sc = document.createElement("script");
    sc.setAttribute("src", "https://www.youtube.com/iframe_api");
    sc.setAttribute("type", "text/javascript");
    document.head.appendChild(sc);

    // YouTube API Ready
    function onYouTubeIframeAPIReady() {
      // 定義影片清單
      var videoList = [
        'FDFKT9PJfDc','maRFwK-KnHw','n9Gu72nAZbU',
        // VIDEO_ID
      ];

      // 隨機選擇一個影片
      var randomVideoId = videoList[Math.floor(Math.random() * videoList.length)];

      // 創建 YouTube 播放器
      var player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: randomVideoId,  // 初始播放的影片
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });

      // 當播放器就緒時的回調函數
      function onPlayerReady(event) {
        // 開始播放影片
        event.target.playVideo();
      }

      // 當播放器狀態改變時的回調函數
      function onPlayerStateChange(event) {
        // 如果影片結束，選擇並撥放下一個隨機影片
        if (event.data === YT.PlayerState.ENDED) {
          var newRandomVideoId = videoList[Math.floor(Math.random() * videoList.length)];
          event.target.loadVideoById(newRandomVideoId);
        }
      }
    }
  </script>
</body>
</html>

I tried placing the HTML and JavaScript in Content and JavaScript-After Content Ready respectively, but it didn't work.

Content

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shuffle YouTube videos</title>  
</head>
<body>
  <h1>Shuffle YouTube videos</h1>
  <div id="player"></div>
</body>
</html>

JavaScript-After Content Ready

var sc = document.createElement("script");
sc.setAttribute("src", "https://www.youtube.com/iframe_api");
sc.setAttribute("type", "text/javascript");
document.head.appendChild(sc);

// YouTube API Ready 時觸發的回調函數
function onYouTubeIframeAPIReady() {
  // 定義影片清單
  var videoList = [
    'FDFKT9PJfDc', 'maRFwK-KnHw', 'n9Gu72nAZbU',
    // 加入更多影片的 VIDEO_ID
  ];

  // 隨機選擇一個影片
  var randomVideoId = videoList[Math.floor(Math.random() * videoList.length)];

  // 創建 YouTube 播放器
  var player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: randomVideoId,  // 初始播放的影片
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

  // 當播放器就緒時的回調函數
  function onPlayerReady(event) {
    // 開始播放影片
    event.target.playVideo();
  }

  // 當播放器狀態改變時的回調函數
  function onPlayerStateChange(event) {
    // 如果影片結束，選擇並撥放下一個隨機影片
    if (event.data === YT.PlayerState.ENDED) {
      var newRandomVideoId = videoList[Math.floor(Math.random() * videoList.length)];
      event.target.loadVideoById(newRandomVideoId);
    }
  }
}

mikhail-vl commented 5 months ago

@Raphealtony That's an interesting example. This is the way you need to do it:

Screenshot 2024-01-24 at 9 22 36 PM

External Script

https://www.youtube.com/iframe_api

Content

<h1>Shuffle YouTube videos</h1>
<div id="player"></div>

JavaScript after Render:

// 定義影片清單
var videoList = [
  'FDFKT9PJfDc', 'maRFwK-KnHw', 'n9Gu72nAZbU',
  // 加入更多影片的 VIDEO_ID
];

// 隨機選擇一個影片
var randomVideoId = videoList[Math.floor(Math.random() * videoList.length)];

// 創建 YouTube 播放器
var player = new YT.Player('player', {
  height: '360',
  width: '640',
  videoId: randomVideoId,  // 初始播放的影片
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});

// 當播放器就緒時的回調函數
function onPlayerReady(event) {
  // 開始播放影片
  event.target.playVideo();
}

// 當播放器狀態改變時的回調函數
function onPlayerStateChange(event) {
  // 如果影片結束，選擇並撥放下一個隨機影片
  if (event.data === YT.PlayerState.ENDED) {
    var newRandomVideoId = videoList[Math.floor(Math.random() * videoList.length)];
    event.target.loadVideoById(newRandomVideoId);
  }
}

We will add it to the documentation.

mikhail-vl commented 5 months ago

Updated Code:

const videoList = ['AcQi-6GCrNU', '1ogv2jstrlI', 'vky-7-DfvXE'];
const randomVideoId = videoList[Math.floor(Math.random() * videoList.length)];

const onPlayerReady = (event) => event.target.playVideo();

const onPlayerStateChange = (event) => {
  if (event.data === YT.PlayerState.ENDED) {
    var newRandomVideoId = videoList[Math.floor(Math.random() * videoList.length)];
    event.target.loadVideoById(newRandomVideoId);
  }
}

const player = new YT.Player('player', {
  height: '360',
  width: '640',
  videoId: randomVideoId,
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});

Raphealtony commented 5 months ago

thank you!

mikhail-vl commented 5 months ago

@Raphealtony Added to the documentation: https://volkovlabs.io/plugins/volkovlabs-dynamictext-panel/external/#youtube-video

Let us know if there is anything else.

Raphealtony commented 5 months ago

ok, thank you

VolkovLabs / volkovlabs-dynamictext-panel

How do I get the following syntax to shuffle YouTube videos with the Dynamic Text Plugin? #261