Unable to play HLS live or VOD stream on chromecast from chrome sender app
<p>My setup:</p>

<ul>
<li>XAMPP (version 5.6.20)</li>
<li>using source code: <a href="https://github.com/googlecast/CastHelloVideo-chrome" rel="nofollow">https://github.com/googlecast/CastHelloVideo-chrome</a></li>
<li>Google Chrome (Version 50.0.2661.94 (64-bit))</li>
<li>Macbook air (10.11.1 (15B42))</li>
<li>Chromecast 2nd generation (firmware version: 1.18.55065)</li>
</ul>

<p>Modified httpd.conf located here: /Applications/XAMPP/xamppfiles/etc/httpd.conf</p>

<pre><code>&lt;Directory "/Applications/XAMPP/xamppfiles/htdocs"&gt;
#
# Possible values for the Options directive are "None", "All",
# or any combination of:
#   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
#
.....
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
&lt;/Directory&gt;
</code></pre>

<p>and later in httpd.conf made sure this is enabled:</p>

<pre><code> LoadModule headers_module modules/mod_headers.so
</code></pre>

<p>If I do where castvideo is the same path as the root of <a href="https://github.com/googlecast/CastHelloVideo-chrome" rel="nofollow">https://github.com/googlecast/CastHelloVideo-chrome</a>:
<code>curl -I https://myserver.com/castvideo/index.html</code></p>

<p>I get:</p>

<pre><code>HTTP/1.1 200 OK
Date: Tue, 10 May 2016 23:12:26 GMT
Server: Apache/2.4.18 (Unix) OpenSSL/1.0.2g PHP/5.6.20 mod_perl/2.0.8-dev Perl/v5.16.3
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT
Accept-Ranges: bytes
Content-Length: 3323
Content-Type: text/html
</code></pre>

<p>When I click the "Load Custom Media" button to load <a href="https://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8" rel="nofollow">https://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8</a>, get this error from chromecast logs from <a href="http://RECEIVER-IP-ADDRESS:9222" rel="nofollow">http://RECEIVER-IP-ADDRESS:9222</a>:</p>

<pre><code>XMLHttpRequest cannot load     https://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.gstatic.com' is therefore not allowed access.
media_player.js:22  [ 23.204s] [goog.net.XhrIo] Request complete [GET https://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8 0]
media_player.js:22  [ 23.212s] [cast.player.api.Host] error: cast.player.api.ErrorCode.NETWORK/311Gb @ media_player.js:22Eb.di @ media_player.js:22ib.log @ media_player.js:19Kb @ media_player.js:23L @ media_player.js:85xg.Ub @ media_player.js:166k.fd @ media_player.js:108of.fd @ media_player.js:109k.uc @ media_player.js:108pc @ media_player.js:34oc.dispatchEvent @ media_player.js:33Gc @ media_player.js:39Ic @ media_player.js:42D.Ui @ media_player.js:40D.zh @ media_player.js:40
media_player.js:22  [ 23.216s] [cast.player.api.Player] unload
cast_receiver.js:45  [ 23.376s] [cast.receiver.MediaManager] Load metadata error: [object Object]
</code></pre>

<p><strong>Question:</strong></p>

<p>Why cannot I not play a HLS stream?</p>

<p>Why am I getting "No 'Access-Control-Allow-Origin' header is present on the requested resource."? When I do a curl it shows it is present.</p>