I have created a new layout and have three elements that work exactly as intended on the admin preview but not when viewing in the ‘Display’ on the client.
The three regions that are not displaying correctly are the text region, clock, and embedded (where YouTube is scripted). The first two (text + clock) are displaying black backgrounds on the client instead of being transparent and blue, respectively.
The third, the YouTube embed, has been scripted per the script here: Autoplay Embedded Youtube Videos | Xibo Digital Signage. It plays correctly in the admin preview but the client does not autoplay and if I’m able to click on it there is a playback error with just an ID, no error number.
Thank you for any help and guidance you can provide. I’ve included a screenshot to provide some guidance.
1.7.3 is a very old player version and so we would recommend that you upgrade the player to either 1.8.14, R258 or R301 and see if the same Layout has the same issue.
If the issue still persists, make sure that your Windows machine is up to date with the latest updates AND drivers for the hardware and then you could try this alternative script for the embedded Youtube videos and please do confirm if the issue persists:
<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;
var playerState = -1;
var readyCalled = false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
suggestedQuality: 'hd1080',
height: '1080',
width: '1920',
videoId: 'YvgucHg8B2k',
events: {
'onReady': onPlayerReady,
'onError': onError,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log('onPlayerReady');
readyCalled = true;
event.target.playVideo();
}
function onError(event) {
console.log('Error');
console.log(event);
}
function onPlayerStateChange(event) {
console.log('Player Status: ' + event.data);
if (readyCalled && playerState === 3 && event.data === -1) {
console.log('Buffering failed, restarting');
setTimeout(function() { player.playVideo(); }, 1000);
}
playerState = event.data;
}
</script>
