Issue 1470

This issue has been archived. It is now read-only.

Issue	1470
Created	2015-07-27
Updated	2017-10-30
Comments	41
Locked	no

URL: http://trailers.apple.com/
Browser / Version: Firefox 42.0
Operating System: Mac OS X 10.10
Problem type: Video doesn't play

Steps to Reproduce
trailers.apple.com requires the QuickTime plugin for Firefox but serves HTML5 video (M4V) to Chrome.

On a Windows machine without Apple's QuickTime plugin installed, navigate to: http://trailers.apple.com/
Try to watch a movie trailer, such as http://trailers.apple.com/trailers/disney/thegooddinosaur/

Expected Behavior:
The video should play.

Actual Behavior:
The play will display a blank gray rectangle instead of the video or an error message saying "A plugin is required to display this content." But if you fake Chrome's User-Agent and reload the movie trailer page, then the video will play correctly.

Install the "User Agent Switcher" add-on: https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/ There are multiple User-Agent switching add-ons, but it is important to use this one because it changes both Firefox's User-Agent header and navigator.userAgent property. Apple's trailer site checks the navigator.userAgent property.
Switch your User-Agent string from Firefox to Chrome, e.g. "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36"
Reload the same movie trailer page.

RESULT:
The video now plays in Firefox even though the QuickTime plugin is not installed.

karlcow 2015-07-28 09:25:03+00:00 2015-07-28 09:25:03+00:00

ok. Thanks a lot @cpeterso

So using fake Chrome UA
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2227.1 Safari/537.36
on MacOS X 10.10.4
in Gecko browser (42.0a1 (2015-07-27))
I get a green square

<div style="width: 1280px; height: 544px;" class="moviePanel ">
    <video 
        style="width: 1280px; height: 544px;" 
        bgcolor="black" 
        preload="preload" 
        autoplay="autoplay" 
        x-webkit-airplay="allow" 
        src="http://movietrailers.apple.com/movies/disney/gooddinosaur/thegooddinosaur-tlr2_a720p.m4v?width=1280&amp;height=544" 
        type="video/mp4" 
        class=" video" 
        id="" 
        height="544" width="1280"></video>
    <div style="width: 1280px; height: 544px;" class="controllerPanel">
        …
    </div>
</div>

karlcow 2015-07-28 09:26:13+00:00 2015-07-28 09:26:13+00:00
I sent an email to my contacts at Apple yesterday, but no reply yet.
miketaylr 2015-07-29 17:31:16+00:00 2015-07-29 17:31:16+00:00
I also get a green square, but audio works fine.
karlcow 2015-08-02 23:24:53+00:00 2015-08-02 23:24:53+00:00
So far I got a big silence from my previous contacts at Apple.
I wonder if I should try to find new contacts.
karlcow 2015-08-02 23:29:22+00:00 2015-08-02 23:29:22+00:00
Could @jonathandavis help us find the right contact at Apple?
karlcow 2015-08-03 01:24:28+00:00 2015-08-03 01:24:28+00:00
seeAlso: #427 duplicate?
cpeterso 2015-08-04 17:01:39+00:00 2015-08-04 17:01:39+00:00
Note that Firefox 40 enabled OS X hardware acceleration for video and the Apple trailers can crash Firefox or even the OS. This is Firefox bug 1187103. The trailers play using fine using HTML5 on Windows or Firefox 39 on OS X.
miketaylr 2015-08-11 14:12:16+00:00 2015-08-11 14:12:16+00:00
I tweeted to @jonathandavis -- perhaps he doesn't read GitHub notifications:

https://twitter.com/miketaylr/status/631105717420716037
jonathandavis 2015-08-11 18:33:57+00:00 2015-08-11 18:33:57+00:00
Filed Radar 22234592: trailers.apple.com serving QuickTime movies to Firefox
miketaylr 2015-08-11 18:48:57+00:00 2015-08-11 18:48:57+00:00
Thanks Jonathan!
cpeterso 2015-08-12 08:19:10+00:00 2015-08-12 08:19:10+00:00
Thanks, @jonathandavis!

Firefox bug 1187103 has been fixed in Firefox (Nightly) 42, so trailers.apple.com's MP4 videos no longer crash Firefox on OS X.
karlcow 2015-08-25 01:55:44+00:00 2015-08-25 01:55:44+00:00
Confirmed that Firefox 42+ is now working with the code sent to Chrome browser User Agent.

Currently Firefox is at version 40.0.2 So I guess in around 12 weeks it would be safer for Apple to move Firefox users to the Chrome code.
cpeterso 2015-09-28 17:29:13+00:00 2015-09-28 17:29:13+00:00
trailers.apple.com also serves HTML5 video to MS Edge, but QuickTime to IE.
karlcow 2015-10-28 23:48:36+00:00 2015-10-28 23:48:36+00:00
I told yesterday to @hober about it at TPAC 2015.
He told me that he will fill a bug at Apple for us.
karlcow 2015-10-28 23:49:36+00:00 2015-10-28 23:49:36+00:00
/me points also @hober to #427 an issue for Opera browsers (blink) that @andreasbovens reported.
cpeterso 2015-11-02 18:41:38+00:00 2015-11-02 18:41:38+00:00
@karlcow and @hober: note that @jonathandavis filed Apple Radar issue 22234592 ("trailers.apple.com serving QuickTime movies to Firefox") back in August.
karlcow 2016-04-06 00:24:14+00:00 2016-04-06 00:24:14+00:00
Related or duplicate of this bug
https://bugzilla.mozilla.org/show_bug.cgi?id=1262149

@jonathandavis and @hober any news about this issue.
karlcow 2016-04-06 06:50:14+00:00 2016-04-06 06:50:14+00:00
Contacted also someone else at Apple.
karlcow 2016-04-07 01:02:14+00:00 2016-04-07 01:02:14+00:00
My contact said he found the right person. They will come back to me later.
karlcow 2016-04-07 07:15:19+00:00 2016-04-07 07:15:19+00:00
Related #427
karlcow 2016-04-26 06:59:28+00:00 2016-04-26 06:59:28+00:00
I have been told it was fixed. I went today with Firefox.
http://trailers.apple.com/trailers/sony/ourlittlesister/

And got a To view this video please use the latest version of Safari.

I will contact again to see if it was deployed.
karlcow 2016-05-05 02:13:51+00:00 2016-05-05 02:13:51+00:00
OK 9 days later. Still an issue.

karlcow 2016-05-05 02:28:53+00:00 2016-05-05 02:28:53+00:00

http://trailers.apple.com/trailers/global/v4/scripts/app/app.js

            else {
                //check for video errors
                if (app.videoError && app.isFirefox) {

                    alert(app.langBank[app.videoError]);
                }
                else {

isFirefox is defined by:

    app.isFirefox = ua.match('Firefox');
    if (app.isFirefox && ua.match(/Mac OS X 10[_\.](\d+)/i)){
        var fireVer = parseInt(ua.match(/Mac OS X 10[_\.](\d+)/i)[1]);
        if (fireVer > 10) {
            app.videoError = 'ref-firefox-version-error';
            // jqBody.prepend('<div class="page-warning" data-lang="ref-firefox-version-error"></div>');
        }
    }

which in my case right now returns:

fireVer = 11

which is strange because it is more… about macosx.

so for macosx version > 10.10 like 11, we get an error message. No idea why. I would love someone from Apple to explain. Also does that mean that Firefox on Windows gets a free ticket? Or do we hit an issue elsewhere?

karlcow 2016-05-05 02:39:50+00:00 2016-05-05 02:39:50+00:00

Faking a firefox windows user agent and reloading the page…

wooot!?

we get a player on top… of an insert of the trailers homepage… !!!

<div id="overlay" style="opacity: 1;">
    <section id="overlay-video">
        <div id="clip-stage" class="current-clip" style="display: block;">
            <div style="display: block;">
                <div class="video-player animated" style="width: 641px; height: 363px;">
                    <div class="close-overlay" style="display: none;"><a href="#">X</a></div>
                    <canvas id="video-loader" width="848" height="480"></canvas>
                    <div id="quicktimeWrapper">
                        <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=7,3,0,0" id="quicktimeMovie" width="100%" height="100%">
                            <param name="src" value="http://movietrailers.apple.com/movies/independent/monkeykingheroisback/monkeyking-tlr1_i320.m4v">
                            <param name="enablejavascript" value="true">
                            <param name="postdomevents" value="true">
                            <param name="wmode" value="transparent">
                            <param name="showlogo" value="false">
                            <param name="scale" value="aspect">
                            <param name="autoplay" value="true">
                            <param name="controller" value="false">
                            <param name="bgcolor" value="000000">
                            <embed type="video/quicktime" src="http://movietrailers.apple.com/movies/independent/monkeykingheroisback/monkeyking-tlr1_i320.m4v" pluginspage="http://www.apple.com/quicktime/download/" name="quicktimeMovie" id="quicktimeMovieInner" enablejavascript="true" postdomevents="true" wmode="transparent" showlogo="false" scale="aspect" autoplay="true" controller="false" bgcolor="000000" width="100%" height="100%">
                        </object>
                    </div>
                    <div class="video-poster" style="background-image:url(http://trailers.apple.com/trailers/independent/monkeykingheroisback/images/thumbnail_source_24333.jpg)">
                        <div class="poster-block">
                            <div class="poster-title">Watch Again
                                <div class="poster-play initial-play"><span class="icon icon-play-circle"></span></div>
                            </div>
                            <div class="poster-share">
                                <ul class="share">
                                    <li>Share Now:</li>
                                    <li class="share-facebook"><a href="http://www.facebook.com/share.php?u=http://trailers.apple.com/trailers/independent/monkeykingheroisback/" target="_block">Facebook</a></li>
                                    <li class="share-twitter"><a href="http://twitter.com/home?status=Monkey King: Hero is Back - See the trailer http://trailers.apple.com/trailers/independent/monkeykingheroisback/" target="_block">Twitter</a></li>
                                </ul>
                            </div>
                            <!-- <div class="poster-glass"></div>      <div class="poster-back" style="background-image:url(http://trailers.apple.com/trailers/independent/monkeykingheroisback/images/thumbnail_source_24333.jpg);width: 848px; height: 480px;"></div> --></div>
                    </div>
                    <div id="media-controls" class="videocontrols" style="display: none;">
                        <div class="controls">
                            <div class="volume" title="Volume">
                                <div class="quieter"></div>
                                <div class="track">
                                    <div class="playhead"></div>
                                    <div class="progress"></div>
                                </div>
                                <div class="louder"></div>
                                <div class="title"></div>
                            </div>
                            <div class="buttons">
                                <button id="media-reverse" class="icon icon-reverse"></button>
                                <button id="media-play" class="icon icon-play"></button>
                                <button id="media-forward" class="icon icon-forward"></button>
                            </div>
                            <ul class="options">
                                <li class="option">
                                    <button id="video-resolution" class="icon icon-hd"></button>
                                    <ul id="menu-resolution">
                                        <li class="active">
                                            <button id="resolution-sd" data-res="sd">Standard Definition</button>
                                        </li>
                                        <li class="">
                                            <button id="resolution-hd720" data-res="hd720">High Definition - 720p</button>
                                        </li>
                                        <li class="">
                                            <button id="resolution-hd1080" data-res="hd1080">High Definition - 1080p</button>
                                        </li>
                                    </ul>
                                </li>
                                <!-- <li class="option"><button id="video-sizeup" class="icon icon-view-size"></button></li> -->
                                <li class="option">
                                    <button id="video-fullscreen" class="icon icon-enter-fs" disabled="" style="display: none;"></button>
                                </li>
                            </ul>
                        </div>
                        <div class="timeline">
                            <div class="elapsed">00:00</div>
                            <div class="track" id="video-track">
                                <div class="playhead" id="video-playhead"></div>
                                <div class="buffer" id="video-buffer"></div>
                                <div class="progress" id="video-progress"></div>
                                <div class="loaded" id="video-loaded"></div>
                            </div>
                            <div class="remaining">01:58</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="clip-tray" style="display: none;">
            <div>
                <div class="scroll-container">
                    <ul class="scroll-content" style="width: 900px; transition: all 0.7s ease 0s;">
                        <li class="trailer" style="margin-left: 300px; margin-right: 300px;">
                            <div class="col left">
                                <a href="#" class="thumb link-play"> <span class="play"></span> <img src="http://trailers.apple.com/trailers/independent/monkeykingheroisback/images/thumbnail_24333.jpg" alt="Trailer" width="160" height="90"> </a>
                            </div>
                            <div class="col right">
                                <h3 title="Trailer">Trailer</h3>
                                <ul class="list-trailer-actions">
                                    <li><a href="#" class="link-play">Play</a>1:58</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--/thumb-strip-wrapper-->
                <div class="fade-left"></div>
                <div class="fade-right"></div>
                <a class="arrow left paddle-left" title="Scroll left" style="display: none;"></a>
                <a class="arrow right paddle-right" title="Scroll right" style="display: none;"></a>
            </div>
        </div>
    </section>
</div>

karlcow 2016-05-05 02:43:42+00:00 2016-05-05 02:43:42+00:00
ok some weird things happening there.

After the <embed…> there is an insert indeed of… the trailers home page.

karlcow 2016-05-05 02:45:50+00:00 2016-05-05 02:45:50+00:00

to note that the original HTML (through HTTP) contains nothing. Everything is done through JavaScript

    <header id="header-wrapper" class="top-wrapper"></header>
    <div id="main-wrapper"></div>
    <footer id="globalfooter">
        <!-- Footer goes here -->
    </footer>

karlcow 2016-05-05 02:48:21+00:00 2016-05-05 02:48:21+00:00

Probably code is coming from
http://trailers.apple.com/trailers/global/v4/scripts/libs/ac_quicktime.js

  // init both tags with the required and "special" attributes
  var objTag =  '<object '
          + _QTAddObjectAttr("classid")
          + _QTAddObjectAttr("width")
          + _QTAddObjectAttr("height")
          + _QTAddObjectAttr("codebase")
          + _QTAddObjectAttr("name")
          + _QTAddObjectAttr("id")
          + _QTAddObjectAttr("tabindex")
          + _QTAddObjectAttr("hspace")
          + _QTAddObjectAttr("vspace")
          + _QTAddObjectAttr("border")
          + _QTAddObjectAttr("align")
          + _QTAddObjectAttr("class")
          + _QTAddObjectAttr("title")
          + _QTAddObjectAttr("accesskey")
          + _QTAddObjectAttr("noexternaldata")
          + _QTAddObjectAttr("obj#style")
          + '>'
          + _QTAddObjectParam("src", generateXHTML);
  var embedTag = '<embed '
          + _QTAddEmbedAttr("type")
          + _QTAddEmbedAttr("src")
          + _QTAddEmbedAttr("width")
          + _QTAddEmbedAttr("height")
          + _QTAddEmbedAttr("pluginspage")
          + _QTAddEmbedAttr("name")
          + _QTAddEmbedAttr("id")
          + _QTAddEmbedAttr("align")
          + _QTAddEmbedAttr("tabindex");

  // delete the attributes/params we have already added
  _QTDeleteTagAttrs("type","src","width","height","pluginspage","classid","codebase","name","tabindex",
          "hspace","vspace","border","align","noexternaldata","class","title","accesskey","id","style");

  // and finally, add all of the remaining attributes to the embed and object
  for ( var attrName in gTagAttrs )
  {
    attrValue = gTagAttrs[attrName];
    if ( null != attrValue )
    {
      embedTag += _QTAddEmbedAttr(attrName);
      objTag += _QTAddObjectParam(attrName, generateXHTML);
    }
  }

  // end both tags, we're done
  return objTag + embedTag + '></em' + 'bed></ob' + 'ject' + '>';
}

karlcow 2016-05-05 02:50:59+00:00 2016-05-05 02:50:59+00:00
So now I wonder if they blocked Firefox on mac because it was creating an issue with the DOM.

I'm switching it back to needsdiagnosis so @miketaylr can have a look before I ping again Apple with it.
karlcow 2016-05-05 04:41:23+00:00 2016-05-05 04:41:23+00:00
Same issue by faking Mac OS X 10.10 on Mac OS X 10.11.
```
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:49.0) Gecko/20100101 Firefox/49.0
```

karlcow 2016-05-05 05:07:48+00:00 2016-05-05 05:07:48+00:00

What is currently sent to Safari on the same OS.

<div id="overlay" style="opacity: 1;">
    <section id="overlay-video">
        <div id="clip-stage" class="current-clip" style="display: block;">
            <div style="display: block;">
                <div class="video-player animated" style="width: 848px; height: 480px;">
                    <div class="close-overlay" style="display: none;"><a href="#">X</a></div>
                    <canvas id="video-loader" width="848" height="480" style="display: none;"></canvas>
                    <video id="video-element" class="video-element" preload="auto" poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" autoplay="" airplay="allow" x-webkit-airplay="allow">
                        <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
                        <source src="http://movietrailers.apple.com/movies/independent/monkeykingheroisback/monkeyking-tlr1_480p.mov">
                        <!-- type="video/mp4" -->
                    </video>
                    <div class="video-poster" style="background-image:url(http://trailers.apple.com/trailers/independent/monkeykingheroisback/images/thumbnail_source_24333.jpg)">
                        <div class="poster-block">
                            <div class="poster-title">Watch Again
                                <div class="poster-play initial-play"><span class="icon icon-play-circle"></span></div>
                            </div>
                            <div class="poster-share">
                                <ul class="share">
                                    <li>Share Now:</li>
                                    <li class="share-facebook"><a href="http://www.facebook.com/share.php?u=http://trailers.apple.com/trailers/independent/monkeykingheroisback/" target="_block">Facebook</a></li>
                                    <li class="share-twitter"><a href="http://twitter.com/home?status=Monkey King: Hero is Back - See the trailer http://trailers.apple.com/trailers/independent/monkeykingheroisback/" target="_block">Twitter</a></li>
                                </ul>
                            </div>
                            <!-- <div class="poster-glass"></div>      <div class="poster-back" style="background-image:url(http://trailers.apple.com/trailers/independent/monkeykingheroisback/images/thumbnail_source_24333.jpg);width: 848px; height: 480px;"></div> --></div>
                    </div>
                    <div id="media-controls" class="videocontrols" style="display: none;">
                        <div class="controls">
                            <div class="volume" title="Volume">
                                <div class="quieter"></div>
                                <div class="track">
                                    <div class="playhead" style="left: 35px;"></div>
                                    <div class="progress" style="width: 35px;"></div>
                                </div>
                                <div class="louder"></div>
                                <div class="title"></div>
                            </div>
                            <div class="buttons">
                                <button id="media-reverse" class="icon icon-reverse"></button>
                                <button id="media-play" class="icon icon-play"></button>
                                <button id="media-forward" class="icon icon-forward"></button>
                            </div>
                            <ul class="options">
                                <li class="option">
                                    <button id="video-airplay" class="icon icon-airplay" disabled="" style="display: none;"></button>
                                </li>
                                <li class="option">
                                    <button id="video-resolution" class="icon icon-hd"></button>
                                    <ul id="menu-resolution">
                                        <li class="active">
                                            <button id="resolution-sd" data-res="sd">Standard Definition</button>
                                        </li>
                                        <li class="">
                                            <button id="resolution-hd720" data-res="hd720">High Definition - 720p</button>
                                        </li>
                                        <li class="">
                                            <button id="resolution-hd1080" data-res="hd1080">High Definition - 1080p</button>
                                        </li>
                                    </ul>
                                </li>
                                <!-- <li class="option"><button id="video-sizeup" class="icon icon-view-size"></button></li> -->
                                <li class="option">
                                    <button id="video-fullscreen" class="icon icon-enter-fs"></button>
                                </li>
                            </ul>
                        </div>
                        <div class="timeline">
                            <div class="elapsed">00:00</div>
                            <div class="track" id="video-track">
                                <div class="playhead" id="video-playhead" style="left: 1px;"></div>
                                <div class="buffer" id="video-buffer" style="width: 330px;"></div>
                                <div class="progress" id="video-progress" style="width: 1px;"></div>
                                <div class="loaded" id="video-loaded"></div>
                            </div>
                            <div class="remaining">-01:57</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="clip-tray" style="display: none;">
            <div>
                <div class="scroll-container">
                    <ul class="scroll-content" style="width: 900px; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;">
                        <li class="trailer" style="margin-left: 300px; margin-right: 300px;">
                            <div class="col left">
                                <a href="#" class="thumb link-play"> <span class="play"></span> <img src="http://trailers.apple.com/trailers/independent/monkeykingheroisback/images/thumbnail_24333.jpg" width="160" height="90" alt="Trailer"> </a>
                            </div>
                            <div class="col right">
                                <h3 title="Trailer">Trailer</h3>
                                <ul class="list-trailer-actions">
                                    <li><a href="#" class="link-play">Play</a>1:58</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--/thumb-strip-wrapper-->
                <div class="fade-left"></div>
                <div class="fade-right"></div>
                <a class="arrow left paddle-left" title="Scroll left" style="display: none;"></a>
                <a class="arrow right paddle-right" title="Scroll right" style="display: none;"></a>
            </div>
        </div>
    </section>
</div>

karlcow 2016-05-05 05:11:39+00:00 2016-05-05 05:11:39+00:00

What is sent to Chrome (faking the UA) on Firefox.
The video is working

<div id="overlay" style="opacity: 1;">
    <section id="overlay-video">
        <div id="clip-stage" class="current-clip" style="display: block;">
            <div style="display: block;">
                <div class="video-player animated" style="width: 848px; height: 480px;">
                    <div class="close-overlay" style="display: none;"><a href="#">X</a></div>
                    <canvas id="video-loader" width="848" height="480" style="display: none;"></canvas>
                    <video id="video-element" class="video-element" preload="auto" poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" autoplay="" airplay="allow" x-webkit-airplay="allow">
                        <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
                        <source src="http://movietrailers.apple.com/movies/independent/monkeykingheroisback/monkeyking-tlr1_i320.m4v">
                        <!-- type="video/mp4" -->
                    </video>
                    <div class="video-poster" style="background-image:url(http://trailers.apple.com/trailers/independent/monkeykingheroisback/images/thumbnail_source_24333.jpg)">
                        <div class="poster-block">
                            <div class="poster-title">Watch Again
                                <div class="poster-play initial-play"><span class="icon icon-play-circle"></span></div>
                            </div>
                            <div class="poster-share">
                                <ul class="share">
                                    <li>Share Now:</li>
                                    <li class="share-facebook"><a href="http://www.facebook.com/share.php?u=http://trailers.apple.com/trailers/independent/monkeykingheroisback/" target="_block">Facebook</a></li>
                                    <li class="share-twitter"><a href="http://twitter.com/home?status=Monkey King: Hero is Back - See the trailer http://trailers.apple.com/trailers/independent/monkeykingheroisback/" target="_block">Twitter</a></li>
                                </ul>
                            </div>
                            <!-- <div class="poster-glass"></div>      <div class="poster-back" style="background-image:url(http://trailers.apple.com/trailers/independent/monkeykingheroisback/images/thumbnail_source_24333.jpg);width: 848px; height: 480px;"></div> --></div>
                    </div>
                    <div id="media-controls" class="videocontrols" style="display: none;">
                        <div class="controls">
                            <div class="volume" title="Volume">
                                <div class="quieter"></div>
                                <div class="track">
                                    <div class="playhead" style="left: 35px;"></div>
                                    <div class="progress" style="width: 35px;"></div>
                                </div>
                                <div class="louder"></div>
                                <div class="title"></div>
                            </div>
                            <div class="buttons">
                                <button id="media-reverse" class="icon icon-reverse"></button>
                                <button id="media-play" class="icon icon-pause"></button>
                                <button id="media-forward" class="icon icon-forward"></button>
                            </div>
                            <ul class="options">
                                <li class="option">
                                    <button id="video-resolution" class="icon icon-hd"></button>
                                    <ul id="menu-resolution">
                                        <li class="active">
                                            <button id="resolution-sd" data-res="sd">Standard Definition</button>
                                        </li>
                                        <li class="">
                                            <button id="resolution-hd720" data-res="hd720">High Definition - 720p</button>
                                        </li>
                                        <li class="">
                                            <button id="resolution-hd1080" data-res="hd1080">High Definition - 1080p</button>
                                        </li>
                                    </ul>
                                </li>
                                <!-- <li class="option"><button id="video-sizeup" class="icon icon-view-size"></button></li> -->
                                <li class="option">
                                    <button id="video-fullscreen" class="icon icon-enter-fs"></button>
                                </li>
                            </ul>
                        </div>
                        <div class="timeline">
                            <div class="elapsed">00:17</div>
                            <div class="track" id="video-track">
                                <div class="playhead" id="video-playhead" style="left: 49px;"></div>
                                <div class="buffer" id="video-buffer" style="width: 329.963px;"></div>
                                <div class="progress" id="video-progress" style="width: 49px;"></div>
                                <div class="loaded" id="video-loaded"></div>
                            </div>
                            <div class="remaining">-01:40</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="clip-tray" style="display: none;">
            <div>
                <div class="scroll-container">
                    <ul class="scroll-content" style="width: 900px; transition: all 0.7s ease 0s;">
                        <li class="trailer" style="margin-left: 300px; margin-right: 300px;">
                            <div class="col left">
                                <a href="#" class="thumb link-play"> <span class="play"></span> <img src="http://trailers.apple.com/trailers/independent/monkeykingheroisback/images/thumbnail_24333.jpg" alt="Trailer" width="160" height="90"> </a>
                            </div>
                            <div class="col right">
                                <h3 title="Trailer">Trailer</h3>
                                <ul class="list-trailer-actions">
                                    <li><a href="#" class="link-play">Play</a>1:58</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--/thumb-strip-wrapper-->
                <div class="fade-left"></div>
                <div class="fade-right"></div>
                <a class="arrow left paddle-left" title="Scroll left" style="display: none;"></a>
                <a class="arrow right paddle-right" title="Scroll right" style="display: none;"></a>
            </div>
        </div>
    </section>
</div>

karlcow 2016-05-05 05:17:04+00:00 2016-05-05 05:17:04+00:00
- Firefox mac 10.11 Go use Safari
- Firefox windows object+embed to http://movietrailers.apple.com/movies/independent/monkeykingheroisback/monkeyking-tlr1_i320.m4v
- Safari http://movietrailers.apple.com/movies/independent/monkeykingheroisback/monkeyking-tlr1_480p.mov
- Chrome video+source to http://movietrailers.apple.com/movies/independent/monkeykingheroisback/monkeyking-tlr1_i320.m4v
hallvors 2016-05-05 14:50:49+00:00 2016-05-05 14:50:49+00:00
```
GET http://movietrailers.apple.com/movies/independent/welcometohappiness/welcomeothappiness-tlr1_i320.m4v
302 Redirect to http://trailers.apple.com/
```
- since we're being an OBJECT (or EMBED) and not a VIDEO element Firefox obeys what the server tells it to and renders the home page when fetching the video URL.
miketaylr 2016-05-06 19:56:01+00:00 2016-05-06 19:56:01+00:00

What is sent to Chrome (faking the UA) on Firefox.

So we could fix this with a UA override, correct?
adamopenweb 2016-05-19 12:58:48+00:00 2016-05-19 13:02:54+00:00
@miketaylr using the Chrome UA in Firefox OSX the video's will play which is a big win considering the current situation. But the movie controls in full screen mode are absent. You can still pause the video with space bar, but clicking does nothing.
adamopenweb 2016-06-02 14:47:10+00:00 2016-06-02 14:47:10+00:00
No longer getting the warning about Firefox, but when I click to play the video we get the console error:
"HTTP "Content-Type" of "text/html" is not supported. Load of media resource http://movietrailers.apple.com/movies/independent/thewailing/thewailing-tlr1_i320.m4v failed."
hallvors 2016-06-03 20:25:50+00:00 2016-06-03 20:25:50+00:00
The cause of that error is the redirect from the video URL to the home page (but getting a console error means they are now actually trying to use a VIDEO element instead of OBJECT..which I guess is progress..?)
cpeterso 2016-06-03 20:49:41+00:00 2016-06-03 20:49:56+00:00
The trailers now play correctly for me in Firefox 46 on OS X and Windows! I think this bug is fixed. 👍
adamopenweb 2016-06-03 20:55:28+00:00 2016-06-03 20:55:28+00:00
Sweet! Works for me as well. Closing.
miketaylr 2016-06-03 21:12:48+00:00 2016-06-03 21:12:48+00:00
Wow, that's awesome. Thanks Apple! @jonathandavis 🍎 ❤️
karlcow 2016-06-06 06:24:14+00:00 2016-06-06 06:24:14+00:00
fabulous! It finally happened. Thanks.