How to enable webm format in a component?

[Aaron_Dempwolff]

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"/>

[Aaron_Dempwolff]

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">

        <items jcr:primaryType="nt:unstructured">

            <tabs

                jcr:primaryType="nt:unstructured"

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

                maximized="{Boolean}true">

                <items jcr:primaryType="nt:unstructured">

                    <slides

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Slides"

                        sling:orderBefore="cq:styles"

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

                        margin="{Boolean}true">

                        <items jcr:primaryType="nt:unstructured">

                            <columns

                                jcr:primaryType="nt:unstructured"

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

                                margin="{Boolean}true">

                                <items jcr:primaryType="nt:unstructured">

                                    <column

                                        jcr:primaryType="nt:unstructured"

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

                                        <items jcr:primaryType="nt:unstructured">

                                            <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">

                                                <items jcr:primaryType="nt:unstructured">

                                                    <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">

                                                <items jcr:primaryType="nt:unstructured">

                                                    <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">

                                                            <items jcr:primaryType="nt:unstructured">

                                                                <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]

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_Dempwolff]

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]

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