Извлечь часть видео с видео html5. Полноэкранные проблемы на iphone/ipad

Что я хочу выполнить:

У меня есть проект, в котором я надеюсь сделать то, что сделала виноградная лоза в своем приложении. Мой проект будет обычным сайтом.

Вот скриншот того, что я обычно хочу:

Пользователь должен иметь возможность записывать видео, принимать его части и загружать на свой сайт. Аудио также должно быть частью видео.

До сих пор Ive создавал слайдер, который перемещает выбранную область. Текущий прототип кода\можно увидеть здесь: http://smn-vlp.azurewebsites.net/ Осторожно: есть звук.

В настоящее время это делается только с javascript и элементом видеодокумента.

Проблема: Iphone использует полноэкранное видео независимо от того, что я делаю с выбранной частью. На других устройствах это работает отлично.

Возможное решение: Я попытался использовать холст для воспроизведения видео, но для того, чтобы на самом деле получить изображения на холсте, исходное видео должно быть .play(). Это снова активирует полноэкранный режим с сафари. Затем я подумал о том, как установить 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 без переполнения?
• Мне бы хотелось, чтобы другие общие предложения о том, как это сделать.

Ответы

// 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);