HTML5：从 iPad 相机胶卷播放本地视频

Question

我找到了这个 SO 帖子，但它已经过时了：Play a local video from iPad in an HTML 5 webpage

iOS 6 提供了访问相机胶卷以上传文件（例如，从 iPad 相机捕获的 .mov 文件）的功能。我不确定该归功于谁，但我发现了一个 jsFiddle，它使用输入字段来获取本地文件并将其加载到视频元素中进行播放。这适用于 .mov 文件的桌面接受，但从接受属性中删除“video/*”允许输入文件从本地选择 .mov，并在 JS 中强制 file.type 为“video/mp4”允许要在视频元素中播放的 .mov。

参见上面引用的 jsFiddle：http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/presentation/

但是，当涉及到在移动 safari 中工作时，文件仍然无法加载，即使您在文件输入字段中看到预览缩略图和文件名。我添加了一个链接到将“?dl=1”连接到 blob: url 的页面，但单击它只会导致 mSafari 显示“无效地址”，即使指向托管 .mov 的链接在 quicktime 中播放。最终，我希望能够从相机胶卷中选择一个视频，在 html 视频播放器中播放它，并且（理想情况下）将该文件的源路径存储在数据库中以供以后访问。我错过了什么？

在这里查看我编辑的 jsFiddle 版本： http://lt.umn.edu/email/

JS：

playSelectedFile = function playSelectedFileInit(event) {
    var file = this.files[0];
    //var type = file.type;
    var type = "video/mp4";
    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);

    var tempURL = fileURL+'?dl=1';
    var tempText = '<a href="'+tempURL+'?dl=1">'+tempURL+'?dl=1</a>';
    displayMessage(tempText, isError);

    videoNode.src = fileURL;
}

Answer 1

使用 querySelector 时使用 var videoNode = document.querySelector('video')[0];

编辑：

否则尝试删除视频节点并使用正确的 src 重新创建它。我有同样的问题，电影无法播放。我想更改 src 不会在任何地方都有效..