javascript - 用html5视频提取部分视频。 iphone/ipad 上的全屏问题

Question

我想完成的事情:

我有一个项目，希望能完成 vine 在他们的应用程序中所做的工作。我的项目将是一个普通的网站。

这是我通常想要的截图:

用户应该可以录制视频、截取其中的一部分并将其上传到我的网站。音频也应该是视频的一部分。

到目前为止，我制作了一个循环选择区域的 slider 。当前代码\原型(prototype)可以在这里看到:http://smn-vlp.azurewebsites.net/ 注意:有声音。

目前仅使用 javascript 和视频 dom 元素完成。

问题: 无论我如何处理所选部分，iPhone 都会使用全屏视频。在其他设备上它似乎运行良好。

可能的解决方案: 我尝试使用 canvas 播放视频，但为了真正将图像放到 Canvas 上，原始视频必须 .play()。这会再次触发 safari 的全屏模式。然后我考虑设置 currentTime =+1 并在不实际播放视频的情况下将帧获取到 Canvas 。但是，我可以将绘制的图像保存在一个数组中，以便之后生成视频吗？

如果我从 Canvas 图像生成视频，我该如何处理声音？这行得通吗？

function CaptureAudio() {
    var audioContext = new webkitAudioContext();
    var gainNode = audioContext.createGain();
    gainNode.gain.value = 1;                   // Change Gain Value to test
    filter = audioContext.createBiquadFilter();
    filter.type = 2;                          // Change Filter type to test
    filter.frequency.value = 5040;            // Change frequency to test

    var source = audioContext.createMediaElementSource(video);
    source.connect(gainNode);
    gainNode.connect(filter);
    filter.connect(audioContext.destination);
    console.log(source);
}

如果是这样，我想我必须跟踪视频的选定部分，并在生成视频之前获取该部分的音频。视频可以从图像和音频一起生成吗？

现在，在尝试这一切之前，我很想听听任何做过类似事情的人的意见，所以我不会走一条无法完成的疯狂道路。该项目目前有一些预算限制。

问题总结:

1. 我应该使用 Canvas 生成视频的选定部分吗？
2. 我可以从原始视频向生成的视频添加音频吗？
3. 这是要走的路吗？
4. 是否真的可以在不全屏的情况下在 iphone 上生成视频？
5. 我希望获得有关如何实现此目标的其他一般性建议。

Answer 1

根据 this post ，您没有任何解决方案可以让您的应用程序直接“作为网站”工作。 用户必须将它保存到他们的仪表板，或者你必须制作一个带有 webview 的 iOS 应用程序......

干杯。