video coponent not working in mask

[thirumani_selvam]

I am facing issue with video component. i am using video component is mask layer, . below code contain xfl format of masked video component.

<DOMSymbolItem xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://ns.adobe.com/xfl/2008/" name="Condition Zoom" itemID="516d7885-0000361a" symbolType="graphic" lastModified="1514264849" lastUniqueIdentifier="1">

  <persistentData>

    <PD n="CreateJSToolkit_timelinedata" v="version&#xA;0.1&#xA;loop&#xA;true"/>

  </persistentData>

  <timeline>

    <DOMTimeline name="Condition Zoom" currentFrame="72" guides='&lt;guidelines&gt;&lt;guideline direction="h"&gt;-124&lt;/guideline&gt;&lt;guideline direction="h"&gt;-139&lt;/guideline&gt;&lt;/guidelines&gt;'>

      <layers>

        <DOMLayer name="Animation Blank" color="#4FFF4F" locked="true" outline="true" useOutlineView="true" autoNamed="false" layerType="mask">

          <frames>

            <DOMFrame index="0" duration="193" keyMode="9728">

              <elements>

                <DOMShape>

                  <fills>

                    <FillStyle index="1">

                      <SolidColor color="#99CC66"/>

                    </FillStyle>

                  </fills>

                  <edges>

                    <Edge fillStyle1="1" edges="!6200 -5033|6200 -1945!6200 -1945[6200 -1856 6134 -1787!6134 -1787[6066 -1716 5973 -1718!5973 -1718|2638 -1718!2638 -1718[2552 -1718 2483 -1784!2483 -1784[2411 -1853 2411 -1945!2411 -1945|2411 -5033!2411 -5033[2411 -5123 2480 -5192!2480

-5192[2549 -5261 2638 -5260!2638 -5260|5973 -5260!5973 -5260[6057 -5261 6131 -5182!6131 -5182[6200 -5109 6200 -5033"/>

                  </edges>

                </DOMShape>

              </elements>

            </DOMFrame>

          </frames>

        </DOMLayer>

        <DOMLayer name="Animation Blank" color="#9933CC" parentLayerIndex="0" locked="true" current="true" isSelected="true" autoNamed="false">

          <frames>

            <DOMFrame index="0" duration="193" keyMode="9728">

              <elements>

                <DOMComponentInstance libraryItemName="Video" selected="true" uniqueID="1">

                  <matrix>

                    <Matrix a="0.75" tx="58" ty="-319.95"/>

                  </matrix>

                  <transformationPoint>

                    <Point x="200" y="150"/>

                  </transformationPoint>

                  <parametersAsXML><![CDATA[   <property id="src">

      <Inspectable name="source" variable="src" category="" verbose="0" defaultValue="C:\Users\selvamt\Downloads\untitled.mp4" type="Video Content Path"/>

   </property>

   <property id="autoplay">

      <Inspectable name="autoplay" variable="autoplay" category="" verbose="0" defaultValue="true" type="Boolean"/>

   </property>

   <property id="controls">

      <Inspectable name="controls" variable="controls" category="" verbose="0" defaultValue="true" type="Boolean"/>

   </property>

   <property id="muted">

      <Inspectable name="muted" variable="muted" category="" verbose="0" defaultValue="false" type="Boolean"/>

   </property>

   <property id="loop">

      <Inspectable name="loop" variable="loop" category="" verbose="0" defaultValue="true" type="Boolean"/>

   </property>

   <property id="poster">

      <Inspectable name="poster image" variable="poster" category="" verbose="0" defaultValue="" type="Image Path"/>

   </property>

   <property id="preload">

      <Inspectable name="preload" variable="preload" category="" verbose="0" defaultValue="true" type="Boolean"/>

   </property>

   <property id="class">

      <Inspectable name="class" variable="class" category="" verbose="0" defaultValue="video" type="String"/>

   </property>

   <property id="__ComponentType__">

      <Inspectable name="__ComponentType__" variable="__ComponentType__" category="" verbose="0" defaultValue="1" type="Number"/>

   </property>

]]></parametersAsXML>

                </DOMComponentInstance>

              </elements>

            </DOMFrame>

          </frames>

        </DOMLayer>

        <DOMLayer name="Layer 2" color="#9933CC" locked="true">

          <frames>

            <DOMFrame index="0" duration="193" keyMode="9728">

              <elements>

                <DOMGroup>

                  <members>

                    <DOMShape>

                      <fills>

                        <FillStyle index="1">

                          <SolidColor color="#FFFFFF"/>

                        </FillStyle>

                      </fills>

                      <edges>

                        <Edge fillStyle1="1" edges="

!6184 -5234[6255 -5158 6255 -5081!6255 -5081|6255 -1897!6255 -1897[6255 -1805 6187 -1734!6187 -1734[6117 -1661 6021 -1663!6021 -1663|2583 -1663!2583 -1663[2494 -1663 2423 -1731!2423 -1731[2349 -1803 2349 -1897!2349 -1897|2349 -5081!2349

-5081[2349 -5174 2420 -5245!2420 -5245[2491 -5315 2583 -5315!2583 -5315|6021 -5315!6021 -5315[6108 -5315 6184 -5234"/>

                      </edges>

                    </DOMShape>

                  </members>

                </DOMGroup>

              </elements>

            </DOMFrame>

          </frames>

        </DOMLayer>

        <DOMLayer name="Layer 3" color="#FFFF4F" autoNamed="false">

          <frames>

            <DOMFrame index="0" duration="193" keyMode="9728">

              <elements>

                <DOMShape>

                  <fills>

                    <FillStyle index="1">

                      <LinearGradient>

                        <matrix>

                          <Matrix a="0.0246124267578125" b="-0.0918121337890625" c="0.0215301513671875" d="0.020294189453125" tx="66.5" ty="-45.4"/>

                        </matrix>

                        <GradientEntry color="#FFFFFF" alpha="0" ratio="0"/>

                        <GradientEntry color="#FFFFFF" ratio="1"/>

                      </LinearGradient>

                    </FillStyle>

                  </fills>

                  <edges>

                    <Edge fillStyle0="1" edges="

!1101 -601/3636 -1663!3636 -1663/2745 -1678!2745 -1678/1101 -601"/>

                    <Edge cubics="!2745 -1678(;2745,-1678 1144,-256 1144,-256q2745 -1678 1144 -256);"/>

                    <Edge cubics="!1144 -256(;1144,-256 3636,-1663 3636,-1663q1144 -256 3636 -1663);"/>

                    <Edge cubics="!3636 -1663(;3636,-1663 2745,-1678 2745,-1678q3636 -1663 2745 -1678);"/>

                  </edges>

                </DOMShape>

              </elements>

            </DOMFrame>

          </frames>

        </DOMLayer>

      </layers>

    </DOMTimeline>

  </timeline>

</DOMSymbolItem>

below line is in DOMDOCUMENT.xml

<DOMBitmapItem name="____componentassets____/Video" itemID="5a41d570-0000052c" sourceLastImported="1498768008" externalFileSize="583" allowSmoothing="true" useImportedJPEGData="false" compressionType="lossless" originalCompressionType="lossless" quality="50" href="____componentassets____/Video.png" bitmapDataHRef="M 2 1514263909.dat" frameLeft="6980" frameTop="5720" frameRight="7620" frameBottom="6360"/>

I can see video.js in the path "components\video\src"

After converting to HTML5 canvas,video component is not masked, i want center of the video should be shown and other portions should be masked . Below script code shows the masked layer and video component.

(lib.ConditionZoom = function(mode,startPosition,loop) {

    this.initialize(mode,startPosition,loop,{});

    // Animation Blank (mask)

    var mask = new cjs.Shape();

    mask._off = true;

    mask.graphics.p("ANCN1I6DAAQgrAAgighQgkgiAAguIAA4HQAAgtAigjQAjgiAsAAIaDAAQAqAAAlAnQAiAlAAAmIAAYHQAAAsghAjQghAjgtAAIgCgBg");

    mask.setTransform(215.3,-174.4);

    // Animation Blank

    this.instance = new lib.an_Video({'id': '', 'src':'videos/untitled.mp4', 'autoplay':true, 'controls':true, 'muted':false, 'loop':true, 'poster':'images/', 'preload':true, 'class':'video'});

    this.instance.setTransform(208,-169.9,0.75,1,0,0,0,200,150);

    var maskedShapeInstanceList = [this.instance];

    for(var shapedInstanceItr = 0; shapedInstanceItr < maskedShapeInstanceList.length; shapedInstanceItr++) {

        maskedShapeInstanceList[shapedInstanceItr].mask = mask;

    }

    this.timeline.addTween(cjs.Tween.get(this.instance).wait(193));

    // Layer 2

    this.shape = new cjs.Shape();

    this.shape.graphics.f("#FFFFFF").s().p("ANbORI62AAQgsAAgkgiQglgkAAgvIAA43QABgvAjgjQAkgjAtAAIa2AAQAsAAAmAoQAjAmABAnIAAY3QAAAugjAjQgiAkguAAIgDAAg");

    this.shape.setTransform(215.1,-174.4);

    this.timeline.addTween(cjs.Tween.get(this.shape).wait(193));

    // Layer 3

    this.shape_1 = new cjs.Shape();

    this.shape_1.graphics.lf(["rgba(255,255,255,0)","#FFFFFF"],[0,1],-72,86.8,-31.7,-63.6).s().p("AC8kMIG+AHIzzISg");

    this.shape_1.setTransform(118.4,-57);

    this.timeline.addTween(cjs.Tween.get(this.shape_1).wait(193));

}).prototype = p = new cjs.MovieClip();

p.nominalBounds = new cjs.Rectangle(55.1,-265.7,257.7,235.7);

[ClayUUID]

Posting generated and built-in code is not helpful.

You can't mask components in Canvas mode.

But there are some workarounds available:

How to add a video behind canvas elements and control it?

[thirumani_selvam]

i think you misunderstand the issue, i want to hide half of the video, i.e., i want to show only the heart portion, other portion should not be visible. it is not masking the video , what is the workaround for this?

[thirumani_selvam]

where i have to add the line "dom_overlay_container.style.zIndex = -1;"