Level 4

Solved

How to enable webm format in a component?

Forum|Forum|2 years ago
July 26, 2023
2 replies
2223 views

Hello everyone, I have the problem that I'm making a component that is a slider, you can upload files jpg, png, etc, but I would like to add the ability to upload videos in webm format, I searched documentation but only found that in .context in the mimeTypes property you must add:

video/webm

But it still doesn't work, what am I doing wrong?

This is the section where I want to add the webm format:

<image

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

allowUpload="{Boolean}false"

class="cq-droptarget"

fieldDescription="Drag and Drop asset or Path Browser."

fieldLabel="Image Asset (Recommended size: 1440px x 450px)"

fileNameParameter="./fileName"

fileReferenceParameter="./fileReference"

mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml,video/webm]" <------

name="./image"

title="Upload Image Asset"/>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by AsifChowdhury

Hi @aaron_dempwolff

You need to add an attribute type="video/webm" in the src in the html along with the mimeTypes="[video/mp4,video/webm]"

Thanks

Aaron_DempwolffAuthor

Level 4

This is all the code I use:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"

xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"

xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

jcr:primaryType="nt:unstructured"

jcr:title="Custom Slider"

extraClientlibs="[tfs.components.author.editor]"

sling:resourceType="cq/gui/components/authoring/dialog">

<content

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<tabs

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/tabs"

maximized="{Boolean}true">

<slides

jcr:primaryType="nt:unstructured"

jcr:title="Slides"

sling:orderBefore="cq:styles"

sling:resourceType="granite/ui/components/coral/foundation/container"

margin="{Boolean}true">

<columns

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

margin="{Boolean}true">

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<slideType

granite:class="cq-dialog-dropdown-showhide"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/select"

fieldDescription="Please Choose Slide"

fieldLabel="Slide Type"

name="./slideType">

<tfs-slider--text-over-image

jcr:primaryType="nt:unstructured"

text="Title and Text with Background Image"

value="tfs-slider--text-over-image" />

<tfs-slider--no-image

jcr:primaryType="nt:unstructured"

text="Title, Text and Button"

value="tfs-slider--no-image" />

</items>

<granite:data

jcr:primaryType="nt:unstructured"

cq-dialog-dropdown-showhide-target=".showhidetargets" />

</slideType>

<tfs-slider--text-over-image

granite:class="showhidetargets"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<tooltipMessage

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/note"

note="Layout Use: Use between 12 and 8 columns" />

<slides

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

composite="true"

fieldDescription="Click the add button then you will get respective slide related fields to author"

fieldLabel="Slide related fields to author">

<field

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container"

name="./textoverimagemultifield">

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">

<items

jcr:primaryType="nt:unstructured">

<imageGroup

granite:hide="${cqDesign.imageHidden}"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/well">

<items

jcr:primaryType="nt:unstructured">

<image

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

allowUpload="{Boolean}false"

class="cq-droptarget"

fieldDescription="Drag and Drop asset or Path Browser."

fieldLabel="Image Asset (Recommended size: 1440px x 450px)"

fileNameParameter="./fileName"

fileReferenceParameter="./fileReference"

mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml,video/webm]"

name="./image"

title="Upload Image Asset" />

</items>

</imageGroup>

</items>

</column>

</items>

</field>

</slides>

</items>

<granite:data

jcr:primaryType="nt:unstructured"

showhidetargetvalue="tfs-slider--text-over-image" />

</tfs-slider--text-over-image>

</items>

</column>

</items>

</columns>

</items>

</slides>

</items>

</tabs>

</items>

</content>

</jcr:root>

AsifChowdhury

Accepted solution

Community Advisor

Hi @aaron_dempwolff

You need to add an attribute type="video/webm" in the src in the html along with the mimeTypes="[video/mp4,video/webm]"

Thanks

Aaron_DempwolffAuthor

Level 4

Still not working:

I add it in my html:

<img alt="${sliderValue.imageAltText}" src="${sliderValue.fileReference}" type="video/webm">

And in my .context file:

<image

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

allowUpload="{Boolean}false"

class="cq-droptarget"

fieldDescription="Drag and Drop asset or Path Browser."

fieldLabel="Image Asset (Recommended size: 1440px x 350px)"

fileNameParameter="./fileName"

fileReferenceParameter="./fileReference"

mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml,video/mp4,video/webm]"

name="./image"

title="Upload Image Asset"/>

And in the header of the .context file I add this on mime.types:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

jcr:primaryType="nt:unstructured"

jcr:title="Custom Slider"

mime.types="[video/x-matroska mkv, video/dvd vob, mymime/type extension, video/webm webm, video/mp4,video/webm]"

extraClientlibs="[tfs.components.author.editor]"

sling:resourceType="cq/gui/components/authoring/dialog">

I need to use the webm format in the img tag

AsifChowdhury

Community Advisor

You are trying to load a video in a image tag. how it's possible to load a video in a image tag.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded