How to play .mov files in video tag

Question

I am trying to play .mov videos in HTML5 browser. I have tried everything available over the internet e.g.

• attribute "controls"

• using <source> tag

• using src attribute with even changing MIME type to mp4.

But Nothing worked for me. Can anyone suggest solution for this?

Answer 1

The Video tag only supports certain filetypes. The .MOV container uses the Quicktime codec which is proprietary Apple software and is not on the list of Media formats supported by the HTML audio and video elements. I'd suggest transcoding the footage to .MP4 and using that instead.

Answer 2

My suggestion is converting the file to .mp4. There are several softwares you can use to do so. I suggest Handbrake.

https://handbrake.fr/

Answer 3

For jQuery, try this code. What it does it get the data from the input tag and instantiates a FileReader instance. We add an event listener to this instance and we append a <source> tag as child to the <video> tag. We are able to get the duration once the data has been loaded. Adding a type="video/mp4" attribute to the source tag is a small enhancement that would work on most .mov files, but not all (untested). This is an enhancement to another SO answer located here.

$(document).ready(function() {
  var data  = $('#file-input')[0]; // File from <input type="file"> tag
  var reader = new FileReader();

  reader.addEventListener('load', function() {
    var video = $('<video class="uploaded_video_src" controls></video>');

    if (reader.result) {
      $('.uploaded_video_src').append(`<source src="${reader.result}" type="video/mp4">`); // Add type attr for support for some .mov files

      video.on('loadedmetadata', function() {
        console.log('duration:', $(this)[0].duration);
      });
    }
  });
});