预览.mov类型的HTML5视频 [英] 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));

文件类型为.mp4的预览可以按要求工作，但是其他文件类型(如.mov, .avi等)无法预览

The preview of the file type .mp4 is working as required but some other file type like .mov, .avi etc cannot be previewed

推荐答案

不同的浏览器支持不同的视频容器(mp4，mov，WebM等)和编解码器(h.264，VP8等)，但不幸的是，随着时间的流逝，这种趋势也会发生变化. Chrome甚至不一定开箱即用地支持mp4，但是许多系统都会安装允许安装的mp4( https ://en.wikipedia.org/wiki/HTML5_video#Browser_support ).

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.

从理论上讲，也可以使用Javascript在客户端将视频转换为必要的格式(例如 https://bgrins.github.io/videoconverter.js/)，但我认为这将非常缓慢，并且可能无法满足您的预览需求.

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.

这篇关于预览.mov类型的HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！