Preview video in HTML5 type .mov

Question

I am trying to view and download a video using the code provided in this fiddle .

(function localFileVideoPlayerInit(win) { var URL = win.URL || win.webkitURL, displayMessage = (function displayMessageInit() { var node = document.querySelector('#message'); return function displayMessage(message, isError) { node.innerHTML = message; node.className = isError ? 'error' : 'info'; }; }()), playSelectedFile = function playSelectedFileInit(event) { var file = this.files[0]; var type = file.type; var videoNode = document.querySelector('video'); var canPlay = videoNode.canPlayType(type); canPlay = (canPlay === '' ? 'no' : canPlay); var message = 'Can play type "' + type + '": ' + canPlay; var isError = canPlay === 'no'; displayMessage(message, isError); if (isError) { return; } var fileURL = URL.createObjectURL(file); videoNode.src = fileURL; }, inputNode = document.querySelector('input'); if (!URL) { displayMessage('Your browser is not ' + '<a href="http://caniuse.com/bloburls">supported</a>!', true); return; } inputNode.addEventListener('change', playSelectedFile, false); }(window)); 

The .mp4 file type preview works as needed, but some other file types, such as .mov, .avi , etc., cannot be viewed.

Answer 1

Different browsers support different video containers (mp4, mov, WebM, etc.) and codecs (h.264, VP8, etc.), and, unfortunately, this also changes over time. Chrome doesn't even necessarily support mp4 out of the box, but many systems will have settings that allow this ( https://en.wikipedia.org/wiki/HTML5_video#Browser_support ).

In general, if you want to play videos in different browsers, you need to provide video in different formats - an example of a cross-browser approach, which is constantly updated here:

• http://v4e.thewikies.com

Unfortunately, this does not help you much in a particular use case - you will need to download the video and convert it to different formats, which apparently do not want what you want.

It is also theoretically possible to convert the video to the desired formats on the client side using Javascript (e.g. https://bgrins.imtqy.com/videoconverter.js/ ), but it will be very slow, I think, and probably will not satisfy your needs in view.