Video is not showing correct (shows white screen)

Hi,

I created a custom module in Xibo for reading a video rss and make the duration dynamic.
The custom module is build on the base of the webpage module, but i’m not showing a iframe, but a video tag instead.

Unfortunately the video is showing a white screen instead of the video it self.
What am i missing right now?

This is the ‘getResource’ function right now:

public function getResource($displayId = 0)
    {
        // Load in the template
        $data = [];

        // Replace the View Port Width?
        $data['viewPortWidth'] = $this->isPreview() ? $this->region->width : '[[ViewPortWidth]]';

        // Work out the url
        $response = (new Client())->get(self::URL . $this->getOption('videoNumber'));

        $videoResponse = json_decode($response->getBody(), true);

        $this->setDuration($videoResponse['duration']);

        $html = '<video controls="false" autoplay name="media" muted>';
        $html .= '<source src="' . $videoResponse['url'] . '" type="video/mp4">';
        $html .= '</video>';

        // Head Content
        $data['head'] = '<style>
            body { margin: 0; } 
            video { width: 100%; height: 100%; }
        </style>';

        // Body content
        $data['body'] = $html;

        // After body content
        $javaScriptContent = '<script type="text/javascript" src="' . $this->getResourceUrl('vendor/jquery.min.js') . '"></script>';
        $javaScriptContent .= '<script type="text/javascript" src="' . $this->getResourceUrl('xibo-layout-scaler.js') . '"></script>';
        $javaScriptContent .= '<script type="text/javascript" src="' . $this->getResourceUrl('xibo-webpage-render.js') . '"></script>';
        $javaScriptContent .= '<script type="text/javascript">var xiboICTargetId = ' . $this->getWidgetId() . ';</script>';
        $javaScriptContent .= '<script type="text/javascript" src="' . $this->getResourceUrl('xibo-interactive-control.min.js') . '"></script>';
        $javaScriptContent .= '<script>
    const video = document.querySelector("video");

    if (video) {
        const promise = video.play();

        if(promise !== undefined){
            promise.then(() => {
                // Autoplay started
            }).catch(error => {
                // Autoplay was prevented.
                video.muted = true;
                video.play();
            });
        }
    }
</script>';

        // Replace the After body Content
        $data['javaScript'] = $javaScriptContent;

        return $this->renderTemplate($data);
    }

The last part of the javascript is a ‘fix’ i read online but that didn’t fixed the problem.
Is there a way for you to help me fixing this problem?

Thanks in advanced.
(I made a video where you can see the problem but i cant upload it)

Here a some screenshots:

This is the custom module
Screenshot 2023-03-07 at 12.12.13

This is the webpage module showing this URL: https://evgtv.nu/media/evgtv/bastiaan/test
Screenshot 2023-03-07 at 12.12.30

Why is de iframe working and our custom video tag not?

Is there someone who can help?

Hello,

What player type are you using? Windows, Android, Tizen.
Have you tried turning the controls on and clicking with a mouse to determine if its a autoplay issue or a video loading issue?

also try inserting playsinline instead of autoplay

$html = '<div style="position: relative;">
                <video playsinline muted id="myVideo">
                    <source src="' . $videoResponse['url'] . '" type="video/mp4">
                </video>
                <button onclick="playVideo()"></button>
            </div>';

Just starting out in Xibo so forgive me.

I believe remote mp4 video over http doesn’t work, download the video locally, have the video embed use the local video url i.e. file:\\c:\temp\videos\abc.mp4, it will work (as long as appropriate media player etc is installed on the host machine).

If I’m wrong and remote video should work, that would be great - but its not working for me under similar situations (hosted on webpage, HTML embed with video tag, direct link etc)

We are trying to get this working with Android.
So basically it’s just the need of a RSS video feed which we want to use (just like pictures) and give the layout the duration it gets from the RSS feed.

hey did u find any solution?