App Designer: Stop messing with my HTML5 element ID!

[John_F_3]

App Designer in version 2323 will let me add under media, a video element.  The HTML looks like this after the addition and my edit to add a width and height to the video:

                    <figure class="margin-auto widget uib_w_11 d-margins" data-uib="media/video" data-ver="0">
                        <video autoplay="autoplay" loop="loop" width="320" height="200" id="video">
                            <source src="nice_to_meet_you.m4v" type="video/mp4">
                        </video>
                    </figure>

I want to add an id to the source tag like this:

<source  id="dont_touch_me" src="nice_to_meet_you.m4v" type="video/mp4">

I edit the code to add the id since app designer does not have a provision for id on the source tag for either webm or mp4. Save the code from the editor, switch to design and back to code, and the ID vanishes!

<source src="nice_to_meet_you.m4v" type="video/mp4">

The ID on the source tag is needed to change the src dynamically at run time. My work around was to skip adding the source tag in AD, then use jquery to add inner HTML for the video tag.

How to stop AD from messing with the customization? It seems to not care about the added attributes to the video tag but strips added attributes from the source tag.

[Elroy_A_Intel]

Currently, App Designer rewrites the HTML for the elements in your application when changes are made with the WYSIWYG tool. Updates should not be manually made to the html file as it will not be preserved. I recommend using jQuery to add the id's dynamically since App Designer doesn't handle adding an id for video elements appropriately.

[Michael_O_2]

The best way to avoid this issue is to do your coding and forget the buggy Drag and Drop feature of the XDK.

[John_F_3]

Drag and drop works just fine--its the necessity to customize what the designer did not envision that causes the problem.

IMHO the simple solution is to allow an ID on the webm and mp4 Source fields just like the video element already has.  Otherwise, no point of using AD because you can just write HTML5 the manual way.

[Chris_P_Intel]

If AD is overwriting the code you put in, that is definitely a bug. I've logged it and we'll try to get it fixed in one of the upcoming releases.

In the interim though, simply don't select that control. AD won't re-write it unless you select it and then it will fret that it needs updating.

[John_F_3]

@Chris P. Initially forced to use the media control because of another phenomenon!

I would add a <video> tag to an AD container <div>.  Switch to design view then code  and *abracadabra*, the div had disappeared.

I tried another experiment today creating a blank HTML project without cordova. Into the body pasted a <video> section with an ID on the source. Switch to AD you get a warning message about self healing but switching back the code is still there.

Next experiment I edited the code into a layout/row div. The ID on the <source> remained untouched.

Final experiment I put the <video> inside an AD media/text just like the original.  The code and the ID on source remain untouched.

Bottom line: can't reproduce the problem in a simple form.

As time allows I'll add some more things in AD like the original to reproduce the problem in the simplest form.  The original project with the problem was created several versions of XDK prior and has several tabbed views and pages with many controls.