How render/process Videos with fusion and afx

Using Neos & Flow Frontend & Integration
1

Hi there,

I’m from Luxembourg, new to Neos and currently creating a site for a client.

Is it possible to process/render a video/mp4-file with Fusion and AFX?

The video is currently be uploaded with this yaml property:

properties:
    mp4:
      type: 'Neos\Media\Domain\Model\Asset'

I tried to render it with fusion:

videosrc = Client.Site:Component.ImageUri {
        @context.asset = ${q(node).property('mp4')}
        @context.maximumWidth = 900
    }

and the afx:

 <video class="slider_video" autoplay muted loop @if.hasVideo={props.isVideo ? true : false}>
        <source src={props.videosrc} type="video/mp4" />
 </video>

Has anyone a solution for a proper video rendering? Images are working fine, only videos/mp4 not.

I’ve also some difficulties to upload a video in the Media-Area. The message “Media was added” appears, but I can’t see it in the “table”.

Thanks in advance.

2

Hi :blush:

I think you can do it like this:

YAML:

video:
  type: 'Neos\Media\Domain\Model\Asset'
  ui:
    label: 'Video'
    reloadIfChanged: TRUE
    inspector:
      group: 'props'
      editorOptions:
        accept: 'video/*'

Fusion:

video = Neos.Fusion:ResourceUri {
    resource = ${q(node).property('video').resource}
}
renderer = afx`
  <video muted autoplay loop src={props.video} height="1000">
    Sorry, your browser doesn't support embedded videos.
  </video>
`

At least i have done it like this in one of our projects. :blush:

I can’t help you with the other error.
All of our Videos are shown in the Media Library. :confused:

1 Like
3

Thanks Torben, that works perfectly. :smiley: