如何设置链接以打开图像,视频和音频

时间:2013-01-22 11:31:54

标签: php jquery html ajax anchor

我有三个表行,其中包含各自行中的图像,视频和音频列表:

    echo '<td width="11%" class="imagetd">'. ( ( empty ($arrImageFile[$key]) ) ? "&nbsp;" : '<ul class="qandaul"><li>'.htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImageFile[$key]) : $arrImageFile[$key] ) ). '</li></ul></td>' . PHP_EOL;
    echo '<td width="11%" class="videotd">'. ( ( empty ($arrVideoFile[$key]) ) ? "&nbsp;" : '<ul class="qandaul"><li>'.htmlspecialchars( is_array( $arrVideoFile[$key] ) ? implode(",", $arrVideoFile[$key]) : $arrVideoFile[$key] ) ). '</li></ul></td>' . PHP_EOL;
    echo '<td width="11%" class="audiotd">'. ( ( empty ($arrAudioFile[$key]) ) ? "&nbsp;" : '<ul class="qandaul"><li>'.htmlspecialchars( is_array( $arrAudioFile[$key] ) ? implode(",", $arrAudioFile[$key]) : $arrAudioFile[$key] ) ). '</li></ul></td>' . PHP_EOL;

现在它只是在项目符号列表中列出图像,视频和音频文件名。但我想要做的是我想将每个文件设置为超链接,这样如果用户点击其中一个链接,它将在一个单独的页面中显示图像,视频或音频(一个单独的窗口将会显示) ,作为一个较大的或显示播放视频或音频的播放器。

我的问题是如何做到这一点,我需要做以下哪些步骤?

由于

更新:

该列表是一个包含来自数据库的数据的数组。下面是视频数组和数据库的代码。音频和图像具有类似的设置

    $vidquery = "SELECT s.SessionId, q.QuestionId, v.VideoId, VideoFile
                FROM Session s
                INNER JOIN Question q ON s.SessionId = q.SessionId
                INNER JOIN Video_Question vq ON q.QuestionId = vq.QuestionId
                INNER JOIN Video v ON vq.VideoId = v.VideoId
                WHERE s.SessionId = ?";

    global $mysqli;
    $vidqrystmt=$mysqli->prepare($vidquery);
    // You only need to call bind_param once
    $vidqrystmt->bind_param("i",$_POST["session"]);
    // get result and assign variables (prefix with db)
    $vidqrystmt->execute(); 
    $vidqrystmt->bind_result($vidSessionId,$vidQuestionId,$vidVideoId,$vidVideoFile);

        $arrVideoFile = array();

    while ($vidqrystmt->fetch()) {
    $arrVideoFile[] = basename($vidVideoFile);
  }

    $vidqrystmt->close(); 

1 个答案:

答案 0 :(得分:0)

为图像,音频,视频文件保留单独的div。 在图像div ex:

<img alt="Loading" id="tempImg" style="width: 150px; height: 150px;" src="">

喜欢音频div

<object id='tempAud1' name="emQTPlayer" height="45px" width="120px"
                    style="behavior: url(#BinaryBehaviorID)"
                    codebase="http://www.apple.com/qtactivex/qtplugin.cab"
                    classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
                    <param name="autoplay" value="false" />
                    <param name="src"
                        value="" />
                    <param name="controller" value="true" />
                    <param name="type" value="video/quicktime" />
                    <param name="align" value="bottom" />
                    <param name="border" value="0" />
                    <%--                        <param name="wmode" value="transparent">--%>
                    <param name="showcontrols" value="true">
                    <embed id='tempAud2' name="emQTPlayer" type="video/quicktime"
                        autoplay="false" height="45px" width="120px" align="top"
                        border="0" controller="true" postdomevents="true"
                        pluginspage="http://www.apple.com/quicktime/download/"
                        showcontrols="true"
                        src='' />
                </object>

和视频div使用

<object id='tempVid1' name="emQTPlayer" height="240px"
                    width="320px" style="behavior: url(#BinaryBehaviorID)"
                    codebase="http://www.apple.com/qtactivex/qtplugin.cab"
                    classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
                    <param name="autoplay" value="false" />
                    <param name="src"
                        value="" />
                    <param name="controller" value="true" />
                    <param name="type" value="video/quicktime" />
                    <param name="align" value="bottom" />
                    <param name="border" value="0" />
                    <param name="scale" value="tofit" />
                    <%--                                    <param name="wmode" value="transparent">--%>
                    <param name="showcontrols" value="true">
                    <embed id='tempVid2' name="emQTPlayer" type="video/quicktime"
                        autoplay="false" height="auto" width="auto" align="top"
                        border="0" controller="true" postdomevents="true"
                        pluginspage="http://www.apple.com/quicktime/download/"
                        showcontrols="true" scale="tofit"
                        src='' />
                </object>

...在文件名的onclick事件中将src值传递给javascript函数并将其设置为respetive src ....