Question

我尝试使用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等

Answer 1

不同的浏览器支持不同的视频容器（mp4，mov，WebM等）和编解码器（h.264，VP8等），不幸的是，这也会随着时间的推移而改变。 Chrome不一定支持开箱即用的mp4，但许多系统都会安装允许它（https://en.wikipedia.org/wiki/HTML5_video#Browser_support）。

一般情况下，如果您希望能够跨浏览器播放视频，则需要提供不同格式的视频 - 这里有一个跨浏览器方法的示例：

http://v4e.thewikies.com

不幸的是，这对您所具体的特定用例没有太大帮助 - 您需要上传视频并将其转换为不同的格式，这可能不是您想要的。

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

以HTML格式预览.mov类型的视频

1 个答案: