Извлечь часть видео с видео 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 без переполнения?
Мне бы хотелось, чтобы другие общие предложения о том, как это сделать.

Ответ 1

В соответствии с этим сообщением у вас нет никакого решения для вашего приложения работать непосредственно "как веб-сайт". Пользователи должны сохранить их на своей панели инструментов, или вам нужно сделать приложение iOS с веб-просмотром...

Приветствия.

Ответ 2

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

Воспроизведение видеоролика на iPhone

iPhone и iPod усиливают полноэкранное воспроизведение видео в Safari (и в приложениях, которые используют его немодифицированный WebView), но вы можете обойти эту проблему, моделируя воспроизведение, уменьшая видео, а не фактически .play().

Я написал модуль, который заботится о воспроизведении видеоролика и синхронизации его с аудио (но он также работает с видео без звуковой дорожки): 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()) (осторожно, это действительно интенсивно для памяти, если вы сохраняете много кадров, вы можете свернуть браузер)