如何显示图像，视频和音频从数据库到网页作为输出？

Question

I don't know of this is possible but I am outputting image, audio and video files from my db using their directory and filenames. For example in db:

Image:                    Audio:                           Video:

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

Below are the variables that each value from the db are stored in and outputted:

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

So the output is simply:

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

But I want to do 2 things with these strings:

• If I echo each value as a hyperlink, is there a way I can click on one of the links and either display the image, a player playing the audio or a player plaving the video in a separate page?

• If I echo $dbImage as an image tag value, it will display the url as an image. My question is though how can I display an audio or a video player so the user can see the audio/video and play it?

Answer 1

I was thinking of something like JavaScript that creates an iframe for the video. This is only a simple example, but it will give you an idea. You can add fancy lightbox effects if you want, and for more compatibility it would be good to use at least 2 types of video formats, mp4 and 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();