Video is not showing correct (shows white screen)

[bvweijen]

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)

[bvweijen]

Here a some screenshots:

This is the custom module

This is the webpage module showing this URL: https://evgtv.nu/media/evgtv/bastiaan/test

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

[bvweijen]

Is there someone who can help?

[dmagnus]

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.

[203]

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)

[Vishal_Debipersad]

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.