Video cannot be imported in HTML5 Canvas document.

[thirumani_selvam]

I tried to convert a flash to HTML5 canvas using animate. In the created Canvas , it is missing "DOMVideoInstance" for

eg:

<elements>

               <DOMVideoInstance libraryItemName="sample Video " selected="true" frameRight="6000" frameBottom="6000">

                  <matrix>

                         <Matrix tx="61.55" ty="-349.55"/>

                  </matrix>

                </DOMVideoInstance>

  </elements>

               instead of above element, it is showing blank element as </elements>. After converting to canvas, if i check the output log, i got below warning

                  Warnings generated while copying/importing in embedded_video_Canvas1.fla:

                   * Video cannot be imported in HTML5 Canvas document.

[Colin Holgate]

HTML5 Canvas can't play FLV, and if you're trying to play H.264 you would use the Components panel to add a video component, and set its source to be the H.264 file. That should work well. FLVPlayback is ActionScript 3 only, if you do just have FLVs you would need to find the original videos and make H.264, or convert the FLVs to H.264. Finding the original files would give you better quality.

What is your reason to be converting it to HTML5 Canvas?

[thirumani_selvam]

i have saved .fla(before converting to canvas) as .xfl , and analysed the xml files

It doesn't have any .flv file , it have below line in DOMDOCUMENT.xml and Media 6.dat file in bin folder ( I don't know how it is converting it to video(.flv) file )

<DOMVideoItem name="lung highlighted (9s)" itemID="536a1763-0000105f" sourceExternalFilepath="./LIBRARY/lung highlighted (9s).flv" sourceLastImported="1369150498" videoDataHRef="Media 6.dat" videoType="vp6 media" fps="24" channels="0" width="300" height="300" length="8.95833333333333"/>

i am unable to find lung highlighted (9s).flv.flv in library folder.

[Colin Holgate]

vp6 is the codec, so that confirms that it's FLV. Somewhere you have a 9 second video, embedded in the timeline I expect.

It won't covert to HTML5 Canvas. Look in the AS3 version and find the layer that has video, and delete it. Then do a normal File/Convert To/HTML5 Canvas to make the converted file, and reconstruct the video by using a Video component, with a source file that is an external H.264 MP4 video, instead of On2-VP6 FLV.

[thirumani_selvam]

Thanks for your reply,

I have searched many times, still i am not finding the .flv file in the source.If possible, i will share contents.

[thirumani_selvam]

Finally, i copied the source FLV using animate and i have converted to mp4. Please let me know how to proceed further., i.e., how to add that mp4 in canvas file. Thanks in advance

[Colin Holgate · Accepted solution]

You would use the Components panel, and add a Video component to the stage, and set its source to be the MP4 that you made.