0

私はウェブ全体を調査してきましたが、これに対する決定的な答えは見つからなかったので、stackoverflowコミュニティに聞いてみようと思いました。

次の機能を取得することになっているHTML（5）ページがあります。

  • ビデオ「タイムライン」（編集はありませんが、ユーザーはビデオを次々に追加し、このタイムライン内でビデオを並べ替えることができます）
  • 個別のオーディオトラック（音楽/エフェクト、同期されたスピーチではない）をこのスペースに追加でき、ビデオの配置と一緒に再生する必要があります。

ビデオの「タイムライン」全体を1つの長いクリップと見なすことができ、オーディオはトラックごとではなく、タイムラインの全長と一緒に再生する必要があります。

3x 1分のクリップで構成される3分のタイムラインには、一致する3分のオーディオクリップが必要です。オーディオクリップが短い場合は、終了後にループを開始する必要があります。

私の調査から、HTML5 / JSを使用するこれらのもののいずれも、@mediagroupまたはのサポートが必要になるよりも収集しますaudioTracks（ただし、後者は、1つのタイムラインとして再生される複数のビデオに関する問題に実際には対処していません）。

プロジェクトのブラウザ要件は、IE9以降、Chrome、Firefox、iPadです。

これは今日でも可能ですか？

もしそうなら、これを実装する方法についてのアイデアをいただければ幸いです。

4

1 に答える 1

1

これはすべて、少数の新しいプラグインとモジュールを備えた 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 は Web ページのメディア要素以上は再生できません。それらを再生として入れ替えるために実行できるいくつかのトリックがありますが、おそらくシームレスに再生されず、オーディオ トラックが機能しません。

于 2012-11-21T20:24:42.060 に答える