Ionic server can't load video file from Rails server

Question

I embedded a video in my Ionic app which has a source file on my Rails application, so basically I have this

<video width="320" height="240" controls="">
  <source src="http://localhost:3000/uploads/video/video/6/mov_bbb.mp4" type="video/mp4">
</video>

running on this url: http://localhost:8100/#/tab/videos/8 I think it has something to do with the same origin policy, so I've already tried to disable CORS on my Chrome browser starting it with this command: /Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --disable-web-security as well as installing and activating this Chrome plugin, too: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi . It also doesn't work from any other browser which I have installed (Safari and FireFox).

Yet, the video file will not load (the video element will just stay empty, also there is no message about a resource failed to load in my console). How can I make the video load on my localhost:8100 while the video is being served from localhost:3000?

Answer 1

It turned out it wasn't a CORS or server issue at all. Obviously, when working with Ionic, you need to kinda accept that your well known world of HTML has an overlay at the most obscure locations. The issue was that Ionic requires you to use the angular.js src attribute ng-src="path/to/your/file" , making the following work:

<video width="320" height="240" controls="">
  <source ng-src="http://localhost:3000/uploads/video/video/6/mov_bbb.mp4" type="video/mp4">
</video>