Question

我不知道这是可能的，但我正在使用他们的目录和文件名从我的数据库输出图像，音频和视频文件。例如在db：

中

Image:                    Audio:                           Video:

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

以下是存储和输出db中每个值的变量：

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

所以输出就是：

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

但我想用这些字符串做两件事：

如果我将每个值作为超链接回显，是否有一种方法可以点击其中一个链接并显示图像，播放音频的播放器或在单独页面中播放视频的播放器？< / p>
如果我将$dbImage作为图像标记值回显，它会将网址显示为图像。我的问题是，我如何才能显示音频或视频播放器，以便用户可以看到音频/视频并进行播放？

Answer 1

我在考虑像JavaScript一样为视频创建iframe。这只是一个简单的例子，但它会给你一个想法。如果需要，您可以添加精美的灯箱效果，为了获得更多兼容性，最好使用至少两种类型的视频格式，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();

如何将图像，视频和音频从db显示为网页作为输出？

1 个答案: