Closed Bug 899748 Opened 12 years ago Closed 12 years ago

setbeat.com jplayer video/music player has issues with both Firefox for Android and Firefox OS

Categories

(Web Compatibility :: Site Reports, defect)

Product:
Web Compatibility
Component:
Site Reports
Platform:
ARM
Gonk (Firefox OS)
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: karlcow, Assigned: adamopenweb)

References

(
URL
)

Details

(Whiteboard: [mp3][serversniff][sitewait])

Attachments

(1 file)

Simple testcase for MP3 and canPlayType()
383 bytes, text/html
Details
The issue is exhibited at least on the mobile site of http://www.setbeat.com/ When we access the content with ZTE device and "Firefox for Android" UA override (The ZTE user agent string redirects to the desktop site.), the video is not starting and we are being shown a message that the device doesn't have the capabilities for playing the video.
When I access http://setbeat.com/ on the ZTE device, I get the desktop site. With the ZTE device connected to my laptop, I'm adding UA override to the device using this script. → mozua.sh add setbeat.com 1089 KB/s (13583 bytes in 0.012s) Adding fennec UA override for setbeat.com + adb shell mount -o rw,remount /system + adb push /tmp/user.js.tmp /system/b2g/defaults/pref/user.js 1087 KB/s (13659 bytes in 0.012s) + adb shell mount -o ro,remount /system + adb shell stop b2g + adb shell start b2g The device is restarting. After the device restarted I start again Firefox. I go to the preferences and I erase the cookies and data stored. This to be sure there is no preferences set by our previous visit. Now that we have a local UA override we can test again. This time I'm redirected to a mobile site. It has a simple menu "Canciones, Artistas, etc." I'm selecting Canciones, Another list of thumbnail images. I click on the first one. The messages says: "Lo sentimos, tu dispositivo móvil no puede reproducir las canciones" ok let's inspect what is returned by the device. → http -v HEAD http://m.setbeat.com/songs User-Agent:'Mozilla/5.0 (Android; Mobile; rv:18.0) Gecko/18.0 Firefox/18.0' This returns on the shell GET /songs HTTP/1.1 Host: m.setbeat.com Accept-Encoding: gzip, deflate, compress Accept: */* User-Agent: Mozilla/5.0 (Android; Mobile; rv:18.0) Gecko/18.0 Firefox/18.0 HTTP/1.1 200 OK Server: nginx Date: Tue, 30 Jul 2013 19:04:58 GMT Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Set-Cookie: sb=esh0h00urjddgt9ljkm0rel1k4; path=/; domain=.setbeat.com Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache Content-Encoding: gzip Vary: Accept-Encoding <!doctype html> … the content of the document The first item in the playlist is <li data-rel="87690"> <a class="song" href="javascript:;" data-icon="song"> <img src="http://files.setbeat.com/assets/tmp/c/8/e/6/e/6e666b0e576375b16828838dd3d71572fc4.jpg" /> <h3>Estoy Puesto Pa Ti </h3> <p><em>por </em> Omega el fuerte Feat. Farruko, Lucky Reyes</p> </a> <a href="#" class="add" data-theme="e" data-icon="add">Agregar</a> </li> ok empty link managed by JS. The playlist seems to have a JSON data array at the end of the file, sbPlaylist.add() [{"data":{"id":"87690","key":"00ba2284"},"url":"\/musica\/omega-el-fuerte\/estoy-puesto-pa-ti","image":"http:\/\/files.setbeat.com\/assets\/tmp\/c\/8\/e\/6\/e\/6e666b0e576375b16828838dd3d71572fc4.jpg","name":"Estoy Puesto Pa Ti","time":"03:38","artist":"Omega el fuerte Feat. Farruko, Lucky Reyes"}] Using a little trick to make it more readable, on the CLI (shell) echo '[{"data":{"id":"87690","key":"00ba2284"},"url":"\/musica\/omega-el-fuerte\/estoy-puesto-pa-ti","image":"http:\/\/files.setbeat.com\/assets\/tmp\/c\/8\/e\/6\/e\/6e666b0e5763 75b16828838dd3d71572fc4.jpg","name":"Estoy Puesto Pa Ti","time":"03:38","artist":"Omega el fuerte Feat. Farruko, Lucky Reyes"}]' | python -m json.tool [ { "artist": "Omega el fuerte Feat. Farruko, Lucky Reyes", "data": { "id": "87690", "key": "00ba2284" }, "image": "http://files.setbeat.com/assets/tmp/c/8/e/6/e/6e666b0e576375b16828838dd3d71572fc4.jpg", "name": "Estoy Puesto Pa Ti", "time": "03:38", "url": "/musica/omega-el-fuerte/estoy-puesto-pa-ti" } ] OK we see a URL for the file. In the document, there are also two JavaScript files which seem to be related to the player. <script src="http://files.setbeat.com/83340fed.js" type="text/javascript"></script> It seems there's nothing interesting for us so far. Let's look a the second one. After reformatting it a bit, we can discover a player. <script src="http://files.setbeat.com/57289f91.js" type="text/javascript"></script> Let's search for the usual strings "ua", "userAgent", "navigator", etc. Sniffing code. http://jplayer.org/ They are using jPlayer There is no bug associated with jplayer in bugzilla. But there are issues with Firefox OS https://groups.google.com/forum/#!searchin/jplayer/firefox$20os/jplayer/vXy63ppuM5Y/2SKIa7DjkasJ In that script there is also the message associated with the error <div class="no-support jp-no-solution" style="display:none">Lo sentimos tu dispositivo movil no puede reproducir las canciones</div> b.jPlayer.uaBrowser = function(a) { var a = a.toLowerCase(), b = /(opera)(?:.*version)?[ \/]([\w.]+)/, d = /(msie) ([\w.]+)/, e = /(mozilla)(?:.*? rv:([\w.]+))?/, a = /(webkit)[ \/]([\w.]+)/.exec(a) || b.exec(a) || d.exec(a) || a.indexOf("compatible") < 0 && e.exec(a) || []; return { browser: a[1] || "", version: a[2] || "0" } }; b.jPlayer.uaPlatform = function(a) { var b = a.toLowerCase(), d = /(android)/, e = /(mobile)/, a = /(ipad|iphone|ipod|android|blackberry|playbook|windows ce|webos)/.exec(b) || [], b = /(ipad|playbook)/.exec(b) || !e.exec(b) && d.exec(b) || []; a[1] && (a[1] = a[1].replace(/\s/g, "_")); return { platform: a[1] || "", tablet: b[1] || "" } }; b.jPlayer.browser = {}; b.jPlayer.platform = {}; var f = b.jPlayer.uaBrowser(navigator.userAgent); if (f.browser) b.jPlayer.browser[f.browser] = !0, b.jPlayer.browser.version = f.version; f = b.jPlayer.uaPlatform(navigator.userAgent); if (f.platform) b.jPlayer.platform[f.platform] = !0, b.jPlayer.platform.mobile = !f.tablet, b.jPlayer.platform.tablet = !! f.tablet; And there's more later noFullScreen: { msie: /msie [0-6]/, ipad: /ipad.*?os [0-4]/, iphone: /iphone/, ipod: /ipod/, android_pad: /android [0-3](?!.*?mobile)/, android_phone: /android.*?mobile/, blackberry: /blackberry/, windows_ce: /windows ce/, webos: /webos/ }, noVolume: { ipad: /ipad/, iphone: /iphone/, ipod: /ipod/, android_pad: /android(?!.*?mobile)/, android_phone: /android.*?mobile/, blackberry: /blackberry/, windows_ce: /windows ce/, webos: /webos/, playbook: /playbook/ }, Code for the error message. !this.html.used && !this.flash.used ? (this._error({ type: b.jPlayer.error.NO_SOLUTION, context: "{solution:'" + this.options.solution + "', supplied:'" + this.options.supplied + "'}", message: b.jPlayer.errorMsg.NO_SOLUTION, hint: b.jPlayer.errorHint.NO_SOLUTION }), this.css.jq.noSolution.length && this.css.jq.noSolution.show()) : this.css.jq.noSolution.length && this.css.jq.noSolution.hide(); Hallvord, could you help me figuring out what's happening. We might have to propose a patch for jplayer.
Flags: needinfo?(hsteen)
So, looking at the code you figured out most of the story, however the error message is shown if it thinks neither HTML <video> nor Flash video support is usable: !this.html.used&&!this.flash.used and those are set in this block: this.html.support={}; this.flash.support={}; b.each(this.formats, function(b,c){ a.html.support[c]=a.html.canPlay[c]&&a.html.desired; a.flash.support[c]=a.flash.canPlay[c]&&a.flash.desired } ); this.html.used=!1; this.flash.used=!1; b.each(this.solutions,function(c,d){ b.each(a.formats,function(b,c){ if(a[d].support[c])return a[d].used=!0,!1 } ) } ); I can't get further unless I can see the code running or learn what parameters are passed around here.
Flags: needinfo?(hsteen)
That said, it seems the logic above builds on these data structures: ,m4v:{ codec:'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',flashCanPlay:!0,media:"video" } ,ogv:{ codec:'video/ogg; codecs="theora, vorbis"',flashCanPlay:!1, media:"video" } ,webmv:{ codec:'video/webm; codecs="vorbis, vp8"',flashCanPlay:!1,media:"video" } ,flv:{ codec:"video/x-flv",flashCanPlay:!0,media:"video" } and calling element.canPlayType(a.format[c].codec) on audio/video elements for the respective formats. At first sight this code seems to make total sense. So what format(s) is the site actually trying to serve - did you notice, Karl?
Flags: needinfo?(kdubost)
The first time you access the page http://m.setbeat.com/ with Firefox for Android. The device is asking m.seatbeat contains plugin content would you like to activate it? If I do yes, it is working. Select the song, and then button play at the bottom. Song is playing. If I do no, it is not working. Select the song, clicking on play, no song is playing. (but no error messages to say that something wrong happened.) I have the feeling that the site is entirely dependent on flash. Or at least when Flash is not supported it doesn't tell what are the songs that can be played without flash. That said, I just tested on iPod Touch and it is working. So no flash is possible for some devices. OK using the Web inspector in Safari, I found out that the files are mp3. Example: http://m.setbeat.com/listen/460b3af1/87676.mp3 which is redirected to with a firefox for android UA and iPhone 5 http://server.setbeat.com/_/3/3/1/d/3/3/2/0/7a49d5023fd30d5d429b3977e8357140.mp3 And to with Firefox OS UA http://server.setbeat.com/play.php?c=k5xikqEToAxnl0ejWgtpoa9%2FZGL0CnMhHzxNDNQ9KgHBi9yUN5t9GEu4NzrVO315XeDHUVLwPr0KoQaZkAzAFA%3D%3D&i=87676&l=es
Flags: needinfo?(kdubost)
this call: elm.canPlayType('audio/mpeg; codecs="mp3"') for an "audio"-element returns the empty string. If I override this and make the result "maybe" instead, the player works fine. So, it seems Gecko on FirefoxOS under-reports what it's capable of playing?
s/fine/"fine" but with visual issues and elements rendered in the wrong location I'll open a separate bug..
..that layout issue is now bug 905990
Summary: jplayer video player has issues with both Firefox for Android and Firefox OS → setbeat.com jplayer video/music player has issues with both Firefox for Android and Firefox OS
Re-tested in FirefoxOS 1.1 - it too says it's not able to play MP3, so there's no playback on setbeat.com.
(In reply to Hallvord R. M. Steen from comment #8) > Re-tested in FirefoxOS 1.1 - it too says it's not able to play MP3, so > there's no playback on setbeat.com. AFAIK, Firefox OS should be able to play MP3s. Fabrice, can you please confirm?
Flags: needinfo?(fabrice)
Well, per the test case https://bugzilla.mozilla.org/attachment.cgi?id=791236 it says it can't, until that's sorted out there's no point in doing further work in this bug. Should we report an issue in B2G on this?
According to http://bluishcoder.co.nz/2013/08/21/html-media-support-in-firefox.html we have mp3 support on b2g. We have tests for that at https://mxr.mozilla.org/mozilla-central/search?string=can_play_type_mpeg.js but they check canPlayType() on a <video> element, not an <audio> one. Chris, could this behave differently?
Flags: needinfo?(fabrice) → needinfo?(chris.double)
Looks like bug 838331. Technically audio/mpeg doesn't accept a 'codecs' parameter so we didn't accept that. A lot of sites send it though so now we've changed to allow it. Is bug 838331 on FxOS 1.1?
Flags: needinfo?(chris.double)
No it's not... Was never nominated, etc.
Chris - Is bug 838331 suitable for uplift at this point? (Is it a relatively safe change? Will the patch need significant refactoring?) If yes, can we nom this in the name of compatibility?
Flags: needinfo?(chris.double)
(In reply to Lawrence Mandel [:lmandel] from comment #14) > Chris - Is bug 838331 suitable for uplift at this point? (Is it a relatively > safe change? Will the patch need significant refactoring?) If yes, can we > nom this in the name of compatibility? Yes, it's a safe change and could be uplifted. The patch should apply with minimal changes, if any. Nom away I think.
Flags: needinfo?(chris.double)
Whiteboard: [mp3]
the bug fix for bug 838331 is in the Firefox OS 1.1 build my Geeksphone is currently running it seems (yay!) but yesterday's Fennec nightly doesn't have it.. I'll test setbeat again on FxOS, but why isn't the fix in the Android build yet?
So we can nag them about fixing the backend sniffing since FxOS works ;-) Firefox OS: GET / HTTP/1.1 User-Agent: Mozilla/5.0 (Mobile; rv:18.0) Gecko/18.0 Firefox/18.0 Host: www.setbeat.com HTTP/1.1 200 OK Server: nginx Date: Fri, 15 Nov 2013 11:41:21 GMT Content-Type: text/html; charset=utf-8 Connection: keep-alive Vary: Accept-Encoding Set-Cookie: sb=rb32bsupk5uceqqgi372hc4l71; path=/; domain=.setbeat.com Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache Vary: Accept-Encoding Content-Length: 176857 Firefox on Android: ------------------------------------------------------------------ GET / HTTP/1.1 User-Agent: Mozilla/5.0 (Android; Mobile; rv:18.0) Gecko/18.0 Firefox/18.0 Host: www.setbeat.com HTTP/1.1 301 Moved Permanently Server: nginx Date: Fri, 15 Nov 2013 11:41:27 GMT Content-Type: text/html Content-Length: 178 Connection: keep-alive Location: http://m.setbeat.com/ ------------------------------------------------------------------ GET / HTTP/1.1 User-Agent: Mozilla/5.0 (Android; Mobile; rv:18.0) Gecko/18.0 Firefox/18.0 Host: m.setbeat.com HTTP/1.1 200 OK Server: nginx Date: Fri, 15 Nov 2013 11:41:27 GMT Content-Type: text/html; charset=utf-8 Connection: keep-alive Vary: Accept-Encoding Set-Cookie: sb=t91keoof4886lee0uq3k3cd7r7; path=/; domain=.setbeat.com Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache Vary: Accept-Encoding Content-Length: 7036 ------------------------------------------------------------------
Whiteboard: [mp3] → [mp3][serversniff][contactready]
(Forgot to mention: In Firefox for Android you do get the mobile site, but the player still won't work pending bug 838331 getting in..)
Hallvord: I will try to make contact but want to clarify something. The site plays audio for me on FFOS but not in FF Android, I get "sorry your mobile device can not play songs". I don't have flash installed, but it shouldn't matter right?
Flags: needinfo?(hsteen)
Flags: needinfo?(hsteen)
Reached out on Facebook, received an email from the developer.
Assignee: nobody → astevenson
Status: NEW → ASSIGNED
Whiteboard: [mp3][serversniff][contactready] → [mp3][serversniff][sitewait]
The developer emailed me late last night, "Ya agregué el user-agent de firefox y el sitio ya redirecciona a la versión móvil. también actualicé la versión de jPlayer a la más reciente 2.5.0, anteriormente tenia la 2.1, según vi, sigue sin poder reproducir en firefox para android. estaré pendiente de la página del Bug y espero se solucione pronto el problema, Gracias." He's added the fxos UA and we get correctly sent to the mobile site there (thanks!). He's also upgraded jPlayer, but I believe we still are depending on a canPlayType fix to land in Android before we can close.
I vote for closing this now - there's no more work to do for us on the evangelism front.. All work left to do is in bug 887517
Closing. Agreed with Hallvord.
Status: ASSIGNED → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
Component: Mobile → Site Reports
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: