Question

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

借助iOS 6，可以访问相机胶卷以上传文件（例如，从iPad相机中捕获的.mov文件）。我不确定是谁给予赞扬，但我找到了一个jsFiddle，它使用输入字段来获取本地文件并将其加载到视频元素中进行播放。这适用于桌面接受.mov文件，但从accept属性中删除“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无处不在......

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

1 个答案: