Youtube Live Stream

[kwotu]

CMS Version: 3.0.3 Self hosted Docker Install
Player Version: 3 R307.0 XIBO for windows

Hello,

I’m trying to create a layout which features a YouTube live stream, but I’m running into issues. While the preview of the module displays the live stream as intended, players in production either display the background of the layout with no YouTube/stream/video (or audio), or the player shows a YouTube error.

I’ve attempted multiple solutions.

1. I’ve followed the information found on the official Autoplay Embedded Youtube Videos. This process does not show any player, only the background on the layout.
2. I’ve created an HTML page on my website which hosts a YouTube embed of the live stream with all the necessary parameters (auto start, full screen, etc.). Then, I used a webpage module to display the webpage. This method works in preview, however in production, I get an error from YouTube. Note: the page works as expected when viewed in a browser on the windows player machine. The YouTube error is only present when XIBO player for windows attempts to access the page.
3. I’ve tried using an HTML package but the documentation wasn’t clear enough for me to deduce if this is an appropriate solution and how to implement it correctly.
4. Same with HLS video stream. I see an rtmp URL on the YouTube Stream admin, but that URL doesn’t seem to be what XIBO is looking for.

Is it possible to show a YouTube live stream on a windows player? Any guidance would be greatly appreciated

[Vishal_Debipersad]

I have a working solution for win10

under HTML to embed

<!-- BROWSER=edge-->
<div id="player"></div>

Under HEAD content to Embed use

<script>    

  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '1080',
      width: '1920',
      events: {
        'onReady': onPlayerReady,
      }
    });
  }
  function onPlayerReady(event) {
    event.target.loadPlaylist({list:'abcdefg', listType: 'playlist'});
    event.target.setLoop(true);
  }
</script>

You will have to change my script to something that matches yours, I have added a playlist since our customer keeps uploading their Youtube channel with new video which in our case is more Easy to run the playlist.

PS i have tried this with a live stream for testing and it worked.

[kwotu]

Thank you for your reply!

This code works well for videos, however I’m still getting errors when I try to embed a live stream.

For example, if I wanted to include a 24 hour royalty free music channel like this one

4K Lofi Hip Hop Beats 24/7 Radio No Copyright Lofi Beats to sleep/ study to

4K 🔴 Lofi Hip Hop Beats 24/7 Radio 🔴 No Copyright Lofi Beats to sleep/ study to

I can include the video ID parameter and value, which in this case is: videoId: ‘ORBwkXsUNEs’.

The youtube player flashes the content and then displays an error screen:

“An error occured. Please try again later. (playback ID: xxxxxxxx)”

[ksainc]

Morning,

Have you tried using the embed widget instead of the webpage widget?

Sebastian

[kwotu]

Hello, Thanks for your reply!

I have tried using the embed module. This is my code:

HTML to Embed

<!-- BROWSER=edge-->
<div id="player"></div>

HEAD content to Embed

<script>    

  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      videoId: 'xxxxxxxxxxx',
      height: '1080',
      width: '1920',
      events: {
        'onReady': onPlayerReady,
      }
    });
  }
  function onPlayerReady(event) {
    event.target.playVideo();
  }
</script>

[ksainc]

Hey,
I just tested this on my Android Player, it works fine.

Copy and paste all the code in to HTML embed.

[DonBoscoSigns]

I’m having the same exact issue as OP. I tried your suggestion to no avail; while I can get the live video to play in the preview window, it doesn’t work on any of my signs.

The YouTube player will work and videos will play, but not live steams.

Unfortunately the HLS widget does not function on any of my machines, either.

[Vishal_Debipersad]

HLS stands for HTTP LIVE Streaming and it is expecting a RTSP protocol… It could work with HTTPS but I have never tested this myself.

In order to get the full potention of Youtube (API) you have to use the web module and put the code in. It works on Android as @ksainc says.