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)