Preview videos in HTML5 of type .mov

问题

I'm trying to browse and upload videos using the code given 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 preview of the file type .mp4 is working as required but some other file type like .mov, .avi etc cannot be previewed

回答1:

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

In general if you want to be able to play videos across browsers you need to provide the video in different formats - there is an example of a cross browser approach that is kept up to date here:

http://v4e.thewikies.com

Unfortunately, this does not help you too much for the specific use case you have - you would need to upload the video and convert it to the different formats first which is presumably not what you want.

It is also in theory possible to convert a video to the necessary formats on the client side using Javascript (e.g. https://bgrins.github.io/videoconverter.js/) but this will be very slow I think and probably not meet your preview needs.

来源：https://stackoverflow.com/questions/32599806/preview-videos-in-html5-of-type-mov

标签

jquery

video

preview