Bug Tracker

Ticket #8015 (closed bug: cantfix)

Opened 4 years ago

Last modified 4 years ago

Wrap method on HTML5 video element breaking in iPad / iPhone

Reported by: russell.uresti@… Owned by: russell.uresti@…
Priority: undecided Milestone: 1.next
Component: manipulation Version: 1.4.4
Keywords: Cc:
Blocking: Blocked by:

Description

Using wrap() on an an HTML5 video element is causing the video not to be playable on iPad and iPhone devices.

ex. code:
$('#movieElement').wrap('<div />');

There doesn't seem to be a problem with this in desktop Safari, but in Mobile Safari it prevents the video from loading / playing. It just shows a black box area.

I should note that the video tag had source tags inside of it (for different codecs). Not sure if that would make a difference or not, but worth mentioning.

Change History

comment:1 follow-up: ↓ 2 Changed 4 years ago by rwaldron

  • Owner set to russell.uresti@…
  • Status changed from new to pending

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, test against the jQuery 0 GIT version to ensure the issue still exists. Be Excellent to eachother!

comment:2 in reply to: ↑ 1 Changed 4 years ago by russell.uresti@…

  • Status changed from pending to new

Replying to rwaldron:

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, test against the jQuery 0 GIT version to ensure the issue still exists. Be Excellent to eachother!

I have created a JSFiddle link here:  http://jsfiddle.net/ReqcW/

However, this code will function correctly, even when viewed on the iPad. However, when placed into a true HTML page, it will not function.

Here is a link to a JSBin (which accurately shows the error) :  http://jsbin.com/uyohi4/edit

comment:3 follow-up: ↓ 5 Changed 4 years ago by danheberden

oh jsfiddle can do that, just not as well documented:  http://jsfiddle.net/ReqcW/show/

comment:4 follow-up: ↓ 6 Changed 4 years ago by danheberden

Here's a glimpse into what's happening: see the quotes? the url and all the attrs are getting effed up..

 http://gyazo.com/29543d0e43246c033010abf346336439.png

comment:5 in reply to: ↑ 3 Changed 4 years ago by anonymous

Replying to danheberden:

oh jsfiddle can do that, just not as well documented:  http://jsfiddle.net/ReqcW/show/

Got a result that said "error : please use POST request" when viewing on the iPad. I think I prefer JSBin. JSFiddle has rendered multiple things inaccurately for me, while JSBin has never got anything wrong (for me, personally).

comment:6 in reply to: ↑ 4 ; follow-up: ↓ 7 Changed 4 years ago by russell.uresti@…

Replying to danheberden:

Here's a glimpse into what's happening: see the quotes? the url and all the attrs are getting effed up..

 http://gyazo.com/29543d0e43246c033010abf346336439.png

Ohhh, I see. Yeah, the "type" attribute requires double quotes (for the codec) nested inside the overall attribute.

ex. type='video/mp4; codec="avc1.42E01E, mp4a.40.2"'

I can see the double quote thing would mess it up.

comment:7 in reply to: ↑ 6 Changed 4 years ago by russell.uresti@…

Replying to russell.uresti@…:

Replying to danheberden:

Here's a glimpse into what's happening: see the quotes? the url and all the attrs are getting effed up..

 http://gyazo.com/29543d0e43246c033010abf346336439.png

Ohhh, I see. Yeah, the "type" attribute requires double quotes (for the codec) nested inside the overall attribute.

ex. type='video/mp4; codec="avc1.42E01E, mp4a.40.2"'

I can see the double quote thing would mess it up.

Actually, thinking on that, if the quotes were the problem, it would probably be reflected in Firefox, Chrome, Safari, and other desktop browsers. This problem only occurs in iPad and iPhone (and perhaps other mobile devices). I think that syntax is created by FirebugLite, and not an accurate reflection of the DOM. For example, the "controls" attribute does not have values to set it to, so it's not "controls=""". It's just "controls".

comment:8 follow-up: ↓ 9 Changed 4 years ago by danheberden

yeah, escaping the quotes didn't help at all.

Interesting, the problem is on moving the node at all:  http://jsfiddle.net/danheberden/ReqcW/7/show/

inspecting the element shows it's still a vid tag with all the goodies, but, hmmm

comment:9 in reply to: ↑ 8 Changed 4 years ago by russell.uresti@…

Replying to danheberden:

yeah, escaping the quotes didn't help at all.

Interesting, the problem is on moving the node at all:  http://jsfiddle.net/danheberden/ReqcW/7/show/

inspecting the element shows it's still a vid tag with all the goodies, but, hmmm

I had initially thought the culprit was innerHTML, but I don't think that's the case. After some testing, here are two ways to replicate the desired result, just done with native JavaScript.

Without innerHTML :  http://jsbin.com/uyohi4/6/edit

With innerHTML :  http://jsbin.com/uyohi4/5/edit

Both appendChild and innerHTML seem to work just fine.

comment:10 Changed 4 years ago by rwaldron

  • Keywords needsreview added
  • Status changed from new to open
  • Component changed from unfiled to manipulation

comment:11 Changed 4 years ago by dmethvin

  • Keywords needsreview removed
  • Status changed from open to closed
  • Resolution set to cantfix

Based on the last repro cases it seems like this is a bug in Safari and not a jQuery issue. Similar problems occur with iframes and we haven't been able to create workarounds.

Note: See TracTickets for help on using tickets.