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

Question

我想要完成的事情：

我有一个项目，我希望能够完成藤蔓在他们的应用程序中所做的事情。我的项目将是一个普通的网站。

以下是我通常想要的截图：

用户应该可以录制视频，接收部分视频并将其上传到我的网站。音频也应该是视频的一部分。

直到现在，我已经制作了一个循环所选区域的滑块。可以在此处看到当前的代码\ prototype：http://smn-vlp.azurewebsites.net/ 小心：有声音。

现在它仅使用javascript和视频dom元素完成。

问题： 无论我对所选部分做什么，Iphone都使用全屏视频。在其他设备上，它看起来效果很好。

可能的解决方案： 我尝试使用画布来播放视频，但为了实际将图像添加到画布，原始视频必须使用.play（）。这将再次触发safari的全屏模式。然后我考虑设置currentTime = + 1并将帧放到画布而不实际播放视频。但是，我可以将绘制的图像保存在一个数组中，然后生成一个视频吗？

如果我从画布图像生成视频，我该怎么办？这有用吗？

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. 我应该使用画布生成视频的选定部分吗？
2. 我可以从原始视频中为生成的视频添加音频吗？
3. 这是要走的路吗？
4. 实际上是否可以在不使用fullscren的情况下在iphone上生成视频？
5. 我很想知道如何实现这一目标的其他一般性建议。

Answer 1

根据this post，您没有任何解决方案可以让您的应用直接工作＆＃34;作为网站＆＃34;。 用户必须将其保存到仪表板，或者您必须使用webview制作iOS应用程序......

干杯。

Answer 2

你有很多问题应该是分开的，不只是在这里，但我会回答一对：

在iPhone上内嵌播放视频

iPhone和iPod强制在Safari中（以及使用其未经修改的WebView的应用程序）全屏视频播放，但您可以通过略读视频模拟播放而不是实际来解决此问题.play()＆＃39}}。

我写了一个模块，负责播放视频内嵌并将其与音频同步（但它也适用于没有音轨的视频）：iphone-inline-video

使用建议的模块，您可以：

// videoElement is the <video> element
makeVideoPlayableInline(videoElement);

// iOS needs user interaction to load/play a video,
// so you'll need a start button or similar
// You only need to load the video, so .play and then .pause it
startButton.ontouchstart = function () {
    videoElement.play();
    setTimeout(function () { videoElement.pause() }, 10);
}

提取帧

加载视频后，您就可以

// skim to 4.3 seconds
video.currentTime = 4.3;

// extract the frame to your canvas
canvas.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

现在你的画布将拥有提取的框架。使用类似array.push(ctx.getImageData())的内容从画布保存图像（小心，这实际上是内存密集型，如果保存很多帧，可能会导致浏览器崩溃）