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

Posted 2023-03-05

【中文标题】使用 html5 视频提取部分视频。 iphone/ipad 上的全屏问题

【英文标题】：Extract part of video with html5 video. Fullscreen issues on iphone/ipad

【发布时间】：2015-12-27 00:33:47

【问题描述】：

我想要完成的事情：

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

这是我通常想要的截图：

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

到目前为止，我制作了一个循环选定区域的滑块。当前代码\原型可以在这里看到：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);

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

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

问题摘要：

我应该使用画布来生成视频的选定部分吗？ 我可以从原始视频向生成的视频添加音频吗？ 这是要走的路吗？ 真的可以在不进入全屏的情况下在 iphone 上生成视频吗？ 我喜欢其他关于如何完成此任务的一般性建议。

【问题讨论】：

我仍然需要这方面的帮助。

【参考方案1】：

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

干杯。

【参考方案2】：

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

在 iPhone 上播放内嵌视频

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

我编写了一个模块，负责内联播放视频并将其与音频同步（但它也适用于没有音轨的视频）：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()) 之类的东西从画布中保存图像（小心，这真的很占用内存，如果保存很多帧可能会导致浏览器崩溃）