title: Firefox returning content-type text/html not supported for video
body: <p>I am trying to get video from the server to play on the frontend.</p>
  
  <p>Currently, I am working on a project that user an Angular 4 frontend and a Rails 5 API backend. The goal is to upload video to the backend for streaming on the frontend. But, the problem I ran into is Firefox saying the video has the wrong content-type.</p>
  
  <pre><code>HTTP “Content-Type” of “text/html” is not supported. Load of media resource http://localhost:4200/ failed.  1)
  All candidate resources failed to load. Media load paused.  1)
  Cannot play media. No decoders for requested formats: text/html
  </code></pre>
  
  <p>So, I did some reading and troubleshooting and came to the conclusion that the problem must be in backend, so i added a mime type to rails and explicitly added the content type. Here's the relevant backend code.</p>
  
  <p>Movies Controller
      class MoviesController &lt; ApplicationController
          def index
              @movies = Movie.all</p>
  
  <pre><code>        render json: @movies, status: 200
      end
  
      def create
          movie = Movie.new(movie_params)
  
          if movie.save
              render json: movie, status: 201
          else
              render json: { errors: movie.errors }, status: 422
          end
      end
  
      def update
          movie = Movie.find(params[:id])
  
          if movie.update_attributes(movie_params)
              render json: movie, status: 200
          else
              render json: { errors: movie.errors }, status: 422
          end
      end
  
      def show
          movie = Movie.find(params[:id])
  
          render json: movie, status: 200, mime_type: Mime::Type.parse("video/mp4"), 
                                                                          content_type: "video/mp4"
      end
  
      private
  
          def movie_params
              params.require(:movie).permit(:title, :year, :plot, :video)
          end
  end
  </code></pre>
  
  <p>mime_types.rb</p>
  
  <pre><code>Mime::Type.register "video/mp4", :mp4
  </code></pre>
  
  <p>model</p>
  
  <pre><code>class Movie &lt; ApplicationRecord
      has_attached_file :video, styles: {
          medium: { 
              geometry: "640x480", 
              format: 'mp4' }
      }, processors: [:transcoder]
      validates_attachment :video, presence: true
      do_not_validate_attachment_file_type :video
  end
  </code></pre>
  
  <p>After making these changes i tested with a curl command and got the following output.</p>
  
  <pre><code>HTTP/1.1 301 Moved Permanently
  Server: nginx
  Date: Sun, 29 Oct 2017 17:04:03 GMT
  Content-Type: text/html
  Transfer-Encoding: chunked
  Connection: close
  Location: http://localhost
  Expires: Sun, 29 Oct 2017 17:04:02 GMT
  Cache-Control: no-cache
  
  &lt;html&gt;
  &lt;head&gt;&lt;title&gt;301 Moved Permanently&lt;/title&gt;&lt;/head&gt;
  &lt;body bgcolor="white"&gt;
  &lt;center&gt;&lt;h1&gt;301 Moved Permanently&lt;/h1&gt;&lt;/center&gt;
  &lt;hr&gt;&lt;center&gt;nginx&lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  HTTP/1.1 200 OK
  Content-Type: video/mp4; charset=utf-8
  ETag: W/"a8c0ff616394ec492839299f528b046c"
  Cache-Control: max-age=0, private, must-revalidate
  X-Request-Id: 01c9df7d-b878-4ea1-91a3-e22124d73d0c
  X-Runtime: 0.022902
  Vary: Origin
  Transfer-Encoding: chunked
  
  {"id":1,"title":"Test","plot":"Awesomeness","year":1977,"created_at":"2017-10-28T04:39:35.981Z","updated_at":"2017-10-28T04:39:35.981Z","video_file_name":"SampleVideo_720x480_1mb.mp4","video_content_type":"video/mp4","video_file_size":1057149,"video_updated_at":"2017-10-28T04:39:04.001Z"}
  </code></pre>
  
  <p>This output has 2 content types. I am assuming one is for submission and the other is for receiving. The first one has a content-type of text/html while the second has video/mp4. So, I checked Firefox again still had the same error and the video still not loading.</p>
  
  <p>Here is some relevant code from the Angular frontend insight if it is needed.</p>
  
  <p>service</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers, RequestOptions, Response } from "@angular/http"
  import { Observable } from 'rxjs'
  import { Movie } from './dvd'
  import 'rxjs/add/operator/map'
  // import { Movies } from './mock-dvd'
  
  @Injectable()
  export class DvdService {
    moviesURL = 'http://localhost:3001/movies'
  
    constructor(private http: Http) { }
  
    getMovies(): Observable&lt;Movie[]&gt; {
      return this.http.get(this.moviesURL)
          .map((res: Response) =&gt; &lt;Movie[]&gt;res.json())
    }
  
    getMovie(id: number): Observable&lt;Movie&gt; {
      return this.http.get(this.moviesURL + '/' + id + '.json')
          .map((res: Response) =&gt; res.json())
    }
  }
  </code></pre>
  
  <p>component</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { ActivatedRoute, Params, Router, ParamMap } from '@angular/router'
  import { Location } from '@angular/common'
  import { DvdService } from '../../dvd.service'
  import { Movie } from '../../dvd'
  
  import 'rxjs/add/operator/switchMap'  
  
  @Component({
    selector: 'app-dvd-item',
    templateUrl: './dvd-item.component.html',
    styleUrls: ['./dvd-item.component.scss']
  })
  export class DvdItemComponent implements OnInit {
    movie: Movie
    id: number
  
    constructor(private route: ActivatedRoute,
                private location: Location,
                private router: Router,
                private dvdService: DvdService) { 
    }
  
    ngOnInit(): void {
      this.route.paramMap
        .switchMap((params: ParamMap) =&gt; this.dvdService.getMovie(+params.get('id')))
        .subscribe(movie =&gt; this.movie = movie);
    }
  }
  </code></pre>
  
  <p>template</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-3"&gt;
              &lt;div *ngIf="movie"&gt;
                  &lt;h6&gt;{{ movie.title }}&lt;/h6&gt;
                  &lt;h6&gt;{{ movie.video_file_name }}&lt;/h6&gt;
  
                  &lt;video width="640" height="480"&gt;
                      &lt;source src="{{ movie.video }}" type="video/mp4"&gt;
                  &lt;/video&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>