804994 - Some of the videos at twitch.tv are not recognized as supported videos - requires M3U support

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P1)

Description

[Adrian Tamas (:AdrianT)]

Firefox Mobile 17.0b3
Device: Samsung Galaxy Tab 2 7.0 (Android 4.0.4) / Samsung Galaxy S2 (Android 4.0.3)

Steps to reproduce:
1. Go to twitch.tv
2. Wait for the video playback on the main page to be displayed

Expected results:
The video is displayed

Actual results:
A " No video with supported format and MIME type found" error is displayed. On desktop the video is a Flash Player videos and flash works on the device for other videos. The videos seem to be live streams but I am not sure that this is true for all the videos that give this error.

Note:
Issue is not reproducible on the Android Browser

Comment 1

[Aaron Train [:aaronmt]]

E/GeckoConsole(23567): [JavaScript Warning: "HTTP "Content-Type" of "application/vnd.apple.mpegurl" is not supported. Load of media resource http://usher.twitch.tv/stream/multi_playlist/rootcatz.m3u8?token=f3ed01d9a0085196177290038b54aae9d2ded9a1%3Aecd1e2eb93e5c0a5b33e9b8144e2f95ff438028e%3A%7B%22expiration%22%3A%201351086476.8227501%2C%20%22channel%22%3A%20%22rootcatz%22%2C%20%22user_agent%22%3A%20%22.*%22%7D&hd=true failed." {file: "http://www.twitch.tv/" line: 0}]

I don't believe Gecko supports HTTP Live Streaming from M3U playlists with a Content-Type of application/vnd.apple/mpegurl

Chris/Chris, can you verify?

Comment 2

[Aaron Train [:aaronmt]]

Draft: http://tools.ietf.org/html/draft-pantos-http-live-streaming-10

Comment 3

[Brad Lassey [:blassey] (use needinfo?)]

Maire, is this a mime type we're trying to support?

Comment 4

[Maire Reavy [:mreavy]]

(In reply to Brad Lassey [:blassey] from comment #3)
> Maire, is this a mime type we're trying to support?

No, it's not.  I'd actually be surprised if the current tool we're using to play H.264 videos (stagefright) handled playlists.  However, we can look into how we would support M3U playlists for future releases (modulo other priorities). 

It may be we want to support this by spawning an intent so that the user can select from their installed player applications.

Comment 5

[Brad Lassey [:blassey] (use needinfo?)]

Maire, is this something we should be evangelizing on?

Comment 6

[Lawrence Mandel [:lmandel] (use needinfo)]

Although I'm not sure there is much we can do from an evangelism standpoint if twitch.tv doesn't already serve content in another format (I haven't checked), evangelism bugs should now be filed under Tech Evangelism:Mobile.

Comment 7

[Aaron Train [:aaronmt]]

Also, it's unclear if this bug should become actionable based on the ideas from comment #4 instead.

Comment 8

[Maire Reavy [:mreavy]]

(In reply to Brad Lassey [:blassey] from comment #5)
> Maire, is this something we should be evangelizing on?

Maybe, maybe not.  I think it's a question for Karen.  I believe we can support this by spawning an intent so that the user can select from their installed player applications.  So the question IMO is: how important is it to keep the user using Firefox (instead of handing the request off to another app)?  If it's important, then I think Firefox for Android would need to build a UI for supporting such playlists (and I don't know that that makes sense for FF for Android's roadmap).  That is why I think it's a question for Karen.

Comment 9

[Maire Reavy [:mreavy]]

(In reply to Maire Reavy [:mreavy] from comment #8)
> (In reply to Brad Lassey [:blassey] from comment #5)
> > Maire, is this something we should be evangelizing on?
> 
> Maybe, maybe not.  I think it's a question for Karen.  I believe we can
> support this by spawning an intent so that the user can select from their
> installed player applications.  So the question IMO is: how important is it
> to keep the user using Firefox (instead of handing the request off to
> another app)?  If it's important, then I think Firefox for Android would
> need to build a UI for supporting such playlists (and I don't know that that
> makes sense for FF for Android's roadmap).  That is why I think it's a
> question for Karen.

I realized that I didn't addressed the core question of evangelism in my response.  The only thing we could evangelize if developers are using playlists with a single audio or single video file in them.  If that's the case, they should just directly reference the audio or video file.  If however the playlists contain multiple files (which they probably do -- but I don't know), then there's not much to evangelize.  See my previous response (immediately above): FF for Android either supports playlists (which involves a UI for displaying the list) or it spawns an intent -- which I believe is a Karen question.

Comment 10

[Hallvord R. M. Steen [:hallvors]]

I assume M3U playlist support might be covered by bug 780379. I think there's than that old error message more going on here, and I'll do some more analysis shortly.

Comment 11

[Hallvord R. M. Steen [:hallvors]]

Seems there's some backend sniffing serving Flash-based vide to anything that isn't Android or iOS.

Comment 12

[Hallvord R. M. Steen [:hallvors]]

(I have not figured out exactly where the sniffing is - but I see different markup on iOS UAs and there's video content that's obviously not Flash served to Safari on iOS.)

Comment 13

[Hallvord R. M. Steen [:hallvors]]

There is server-side sniffing - but *this* issue is done client-side, here:

http://www-cdn.jtvnw.net/assets/global-58be2335205adc9fbfbbbeca419ee845.js

n.attemptHLSificationByElement=function(e){return this.isSupportedHLSBrowser()?(this.swapPlayerInElement(e),!0):!1},n.isSupportedHLSBrowser=function(){return navigator.userAgent.match(/iPhone|iPod|iPad|webOS|WiiU|Android|Dalvik|GINGERBREAD/i)!==null},n.swapPlayerInElement=function(e){this.hlsId=e.id+"_hls";var t=document.createElement("video");t.setAttribute("width","100%"),t.setAttribute("height","100%"),t.setAttribute("autoplay","autoplay"),t.setAttribute("controls","controls"),t.setAttribute("class","hls_player"),t.setAttribute("id",this.hlsId),e.setAttribute("height","349px");while(e.childNodes.length)e.removeChild(e.firstChild);e.appendChild(t)}

This code changes the original Flash markup from the server into a <VIDEO> element with a M3U source - from:

<div id='live_player'>
<div class='live_site_player_container swf_container js-player-container' data-channel='mudkipzrevenge' id='standard_holder' style='width: 100%; height: 100%'>
<div id='live_site_player_flash'>
You need Adobe Flash Player to watch this video.
<br>
<a href="http://get.adobe.com/flashplayer/">Download it from Adobe.</a>
<script>
  //<![CDATA[
    swfobject.embedSWF("http://www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf", "live_site_player_flash", "100%", "100%", "9", "/widgets/expressinstall.swf", {"channel":"mudkipzrevenge","auto_play":"true","publisherGuard":null,"hostname":"www.twitch.tv","loadCallback":"Twitch.player._twitchPlayerLoaded","publisherTimezoneOffset":420,"hide_chat":"true"}, {"wmode":"opaque","allowFullScreen":"true","allowNetworking":"all","allowScriptAccess":"always"}, {name: "live_site_player_flash"});
  //]]>
</script>

</div>
</div>

To:

<div id="live_player">
<div class="live_site_player_container swf_container js-player-container" data-channel="mudkipzrevenge" id="standard_holder" style="width: 100%; height: 330px; " height="349px"><video width="100%" height="100%" autoplay="autoplay" controls="controls" class="hls_player" id="standard_holder_hls"><source src="http://usher.twitch.tv/stream/multi_playlist/mudkipzrevenge.m3u8?allow_cdn=true&amp;token=46fea388e5baa6727b93791dbe02024d103bfe4d%3A7d9166d9155133610bbe070afa8f655f394f921a%3A%7B%22expiration%22%3A%201378283017.158145%2C%20%22channel%22%3A%20%22mudkipzrevenge%22%2C%20%22user_agent%22%3A%20%22.*%22%7D&amp;hd=true" type="video/mp4"></video></div>


So if/once we support M3U8 playlists, we should contact them and ask if they can add us to this whitelist. Or preferably give them a better way to detect support (I suppose the above code may break Fx-Android if there are instances that do have Flash but do *not* have M3U support?)

Comment 14

[Hallvord R. M. Steen [:hallvors]]

(sorry, this isn't [contactready] until we're better at handling M3U)

Comment 15

[Aaron Train [:aaronmt]]

Still does not work with bug 780379 resolved.

Comment 16

[Aaron Train [:aaronmt]]

For what it's worth, I know that Twitch is internally testing an HTML5 video player. They allow access to certain browsers right now by appending /hls/ to the end of a URL stream (e.g, http://www.twitch.tv/beyondthesummit/hls). So far, they seem to be sniffing out and only allowing what seems like Safari for some reason). Firefox/Chrome yield 'Unsupported Player'

Comment 17

[Aaron Train [:aaronmt]]

http://discuss.dev.twitch.tv/t/html5-embedded-player/150/3

"Specifically we only are using HLS with a .m3u8 playlist which isn't supported on a number of different platforms."

Comment 18

[Adam Stevenson [:adamopenweb]]

Testing in Firefox 60 for Android I'm unable to reproduce this issue. Tried playing a live stream and a recorded video, both seem fine.

Comment 19

[robberphex]

I am using 61.0b6 (64-bit) at macOS.

And it still output `HTTP “Content-Type” of “application/vnd.apple.mpegurl” is not supported.` in console.

Well, it works at Firefox 60 for Android.

Comment 20

[Karl Dubost💡 :karlcow]

The issue was for Mobile Android. And per se, it is fixed since Bug 577084 has been resolved.