0

これが可能かどうかはわかりませんが、ディレクトリとファイル名を使用してデータベースから画像、オーディオ、およびビデオファイルを出力しています。たとえば、デシベルで：

Image:                    Audio:                           Video:

ImageFiles/tulips.png     AudioFiles/LadyintheNight.mp3    VideoFiles/training.mpeg

以下は、データベースからの各値が格納および出力される変数です。

echo $dbImage;
echo $dbAudio;
echo $dbVideo;

したがって、出力は次のようになります。

ImageFiles/tulips.png 
AudioFiles/LadyintheNight.mp3
VideoFiles/training.mpeg

しかし、私はこれらの文字列で2つのことをしたい:

  • 各値をハイパーリンクとしてエコーする場合、リンクのいずれかをクリックして、画像、オーディオを再生するプレーヤー、またはビデオを再生するプレーヤーを別のページに表示する方法はありますか?

  • $dbImage画像タグの値としてエコーすると、URLが画像として表示されます。私の質問は、ユーザーがオーディオ/ビデオを見て再生できるように、オーディオまたはビデオプレーヤーを表示するにはどうすればよいですか?

4

1 に答える 1

1

動画の iframe を作成する JavaScript のようなものを考えていました。これは単純な例にすぎませんが、アイデアが得られます。必要に応じて派手なライトボックス効果を追加できます。互換性を高めるには、少なくとも 2 種類のビデオ形式、mp4 と ogv を使用することをお勧めします。

$('<div id="VideoBackground"></div>').appendTo('body').css({
    opacity: 0.6, 
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    'z-index':'999',
    'background-color': '#CCCCCC',
    height: $(window).height() + 'px'}).hide();
$('<div id="UpperElement"><iframe id="VideoFrame" frameborder="0" scrolling="no" style="width: 320px; height: 240px;"></iframe></div>').appendTo('#VideoBackground');
$('#UpperElement').css({
    'z-index':'1000',
    'margin':'0 auto',
    'width': '320px',
    'height': '240px'
});

document.getElementById('VideoFrame').onload = function() {
    $('#VideoFrame').contents().find('body').append('<video width="320" height="240" controls><source src="http://www.808.dk/pics/video/gizmo.mp4" type="video/mp4"><source src="http://www.808.dk/pics/video/gizmo.ogv" type="video/ogg">Your browser does not support the video tag.</video>');
}

$('#VideoBackground').show();
$('#UpperElement').show();
于 2013-01-15T07:54:09.020 に答える