Возможно ли сегодня создание плейлиста видео с отдельными звуковыми дорожками на лету?

Я исследовал всю сеть, но не нашел окончательного ответа на этот вопрос, поэтому решил спросить у сообщества stackoverflow.

У меня есть страница HTML (5), которая должна иметь следующие функции:

  • «Временная шкала» видео (без редактирования, но пользователь может добавлять одно видео за другим и переупорядочивать видео на этой временной шкале)
  • Отдельные звуковые дорожки (музыка / эффекты, не синхронизированная речь) могут быть добавлены в это пространство и должны воспроизводиться вместе с размещением видео.

Всю «временную шкалу» видео можно рассматривать как один длинный клип, и звук должен воспроизводиться на протяжении всей временной шкалы, а не для каждой дорожки.

Для 3-минутной шкалы времени, состоящей из 3x 1-минутных клипов, потребуется соответствующий 3-минутный аудиоклип, или, если аудиоклип короче, он должен начать зацикливаться после его завершения.

Из своего исследования я понял, что для любого из этих материалов с использованием HTML5 / JS потребуется либо поддержка @mediagroup, либо audioTracks (хотя последнее на самом деле не решает проблемы, связанные с несколькими видео, которые воспроизводятся как одна временная шкала).

Требования к браузеру для проекта: IE9 и выше, Chrome, Firefox, iPad.

Возможно ли это сегодня?

Если это так, мы будем очень признательны за любые идеи о том, как это реализовать.


javascript html audio video audiotrack
person Jannis    schedule 12.11.2012    source источник
comment
это только для воспроизведения, или вы хотите визуализировать «готовый продукт» (видео, состоящее из аудио- и видеодорожек)?   -  person Louis Loudog Trottier    schedule 12.11.2012
comment
Композиция на шкале времени изначально предназначена только для воспроизведения. Однако, как только пользователь подтвердит свое решение, мне нужно будет зафиксировать порядок выбранной и выбранной дорожки и сохранить его, чтобы его можно было вывести на другой странице. Но даже на следующей странице я бы воспроизвел только их выбор, на этот раз без возможности изменить что-либо в последовательности или звуковой дорожке.   -  person Jannis    schedule 12.11.2012
comment
вы создаете облако тега аудио и помещаете звук в этот тег, отключите видео и заставите их воспроизводиться одновременно. Я не помню, как это произошло, но я сделал что-то похожее с простым HTML5 и некоторыми JS.   -  person Louis Loudog Trottier    schedule 16.11.2012

Ответы (1)


arrow_upward
1
arrow_downward

Все это возможно с помощью Popcorn.js с несколькими новыми плагинами и модулями.

Для начала вам потребуется:

Включите указанные выше файлы сценария в указанном порядке и создайте элемент-контейнер, в который все поместите. Тогда примерно так:

var player = Popcorn.HTMLNullVideoElement('#container');
player.src = '#t=0,180'; // Makes a fake video 180 seconds long. Nothing but a timer.

var popcorn = Popcorn(player);

// first clip
popcorn.inception({
    start: 0,
    end: 60,
    source: ['video1.mp4', 'video1.webm', video1.ogv'],
    top: 0,
    left: 0,
    width: '100%'
    target: '#container',
    volume: 0 // mute this video, if you want
});

// second clip
popcorn.inception({
    start: 60,
    end: 120,
    source: ['video2.mp4', 'video2.webm', video2.ogv'],
    top: 0,
    left: 0,
    width: '100%'
    target: '#container',
    volume: 0
});

// third clip
popcorn.inception({
    start: 120,
    end: 180,
    source: ['video3.mp4', 'video3.webm', video3.ogv'],
    top: 0,
    left: 0,
    width: '100%'
    target: '#container',
    volume: 0
});

// audio file
popcorn.inception({
    start: 0,
    end: 180,
    source: ['audio.mp3', 'audio.ogg'],
    visibility: 'hidden'
});

Вы можете программно добавлять или удалять любые или все эти клипы, включая дополнительные копии аудиофайла, если вам нужно его зациклить. HTMLNullVideoElement имитирует собственный элемент видео, поэтому вы можете использовать методы и свойства этого объекта для создания интерфейса проигрывателя.

Единственная проблема здесь в том, что на iPad ничего из этого не сработает. К сожалению, Mobile Safari не будет воспроизводить на веб-странице больше, чем медиа-элемент. Есть несколько уловок, которые вы можете сделать, чтобы поменять их местами во время воспроизведения, но, вероятно, это не будет воспроизводиться плавно, и звуковая дорожка не будет работать.

person brianchirls    schedule 21.11.2012
comment
Это фантастика, спасибо за все детали, которые вы вложили в ответ! - person Jannis; 27.11.2012