[wp-trac] [WordPress Trac] #31058: audio video previews JS errors in IE 8

[WordPress Trac]

#31058: audio video previews JS errors in IE 8
--------------------------+-----------------------------
 Reporter:  afercia       |       Owner:  wonderboymusic
     Type:  defect (bug)  |      Status:  reopened
 Priority:  normal        |   Milestone:  4.1.1
Component:  Media         |     Version:  4.1
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  javascript
--------------------------+-----------------------------

Comment (by afercia):

 Replying to [comment:10 dd32]:
 > the problem is due to us instantiating mediaelement on `<audio|video>`
 tags that aren't yet part of the main DOM, this is something that we
 should open a PR upstream for.
 > In Chrome (if I force it down the flash route) it hits this case but
 `node.parentNode` is null (instead of IE, where it's a node with no real
 context).

 @dd32 thanks very much for looking into this. I think you're right,
 noticed that Internet Explorer 8 while looking for parent nodes, at a
 certain point returns a DocumentFragment, see screenshot (note:
 `parentNode.tagName` returns undefined but `parentNode.nodeName` returns
 #document-fragment)

 [[Image(https://cldup.com/qrzzEfBOIc.png)]]

 https://developer.mozilla.org/en/docs/Web/API/Node.parentNode
 Document and DocumentFragment nodes can never have a parent, so parentNode
 will always return null.

 Also Chrome doesn't reach the `body`: after 6 parent DIVs (same as IE) it
 stops but returns null.

 To my understanding, this means `MediaElementPlayer` is instantiated too
 early, before browsers have the time to insert the new elements into the
 DOM tree. Tried to delay a few milliseconds the instantiation of
 MediaElementPlayer and now both IE and Chrome can reach the body, see
 screenshot:

 [[Image(https://cldup.com/agtF_hoJf3.png)]]

 Attached ''experimental'' patch, not sure this is the way to go would
 greatly appreciate if others more expert than me could have a look here.
 Please notice in the patch I've set the timeout to "1" for testing
 purposes but [https://developer.mozilla.org/en-
 US/docs/Web/API/WindowTimers.setTimeout maybe should be 10] ?

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31058#comment:11>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform