基于VXML的視頻類業(yè)務(wù)的流程交互設(shè)計(jì)
該部分涉及視頻合成服務(wù)器（Media Builder，MBD）的一些功能。MBD可以動(dòng)態(tài)地把提供給它的網(wǎng)頁(yè)合成視頻文件，然后在3G終端進(jìn)行播放。網(wǎng)頁(yè)URL在VXML標(biāo)簽中的位置如陰影部分代碼（URL即為標(biāo)簽audio>所包括部分）所示。
prompt>
audio expr="''">
http：//192.168.2.89：8080/testVXML/index.jsp
!--即為提供給MBD的URL-->
/audio>
/prompt>
當(dāng)VXML文檔經(jīng)過(guò)VXML解析器進(jìn)行解析后，得到URL，此處為http：//192.168.2.89:8080/testVXML/index.jsp，然后將該URL提供給MBD，MBD將相應(yīng)網(wǎng)頁(yè)進(jìn)行截圖，最后合成.mov文件。視頻顯示效果如下圖所示：
視頻顯示效果圖之一
視頻顯示效果圖之二
基于VXML的視頻類業(yè)務(wù)流程交互設(shè)計(jì)的實(shí)例代碼如下。
mainAudioMenu.vxml：
?xml version="1.0"encoding="UTF-8"?>
vxml version="2.1"xmlns="http：//www.w3.org/2001/vxml"
xmlns：xsi="http：//www.w3.org/2001/XML Schema-instance"
xsi：schemaLocation="http：//www.w3.org/2001/vxml
http：//www.w3.org/TR/2004/WD-voicexml21-20040728/vxml.xsd">
form id="idMainMenu">
field name="user_choice">
prompt>
audio expr="''">
http：//192.168.2.89：8080/testVXML/index.jsp
/audio>
!--該URL是提供給視頻合成器的截圖地址-->
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice=='1'">
goto next="videoEnjoy.jsp"/>
!--本實(shí)例主要是涉及這個(gè)分支，其他代碼省略-->
elseif cond="user_choice=='2'"/>
goto next="imageEnjoy.jsp"/>
elseif cond="user_choice=='3'"/>
goto next="stockQuery.jsp"/>
elseif cond="user_choice=='4'"/>
goto next="telHLRQuery.jsp"/>
elseif cond="user_choice=='5'"/>
goto next="addGame.jsp"/>
else/>
goto next="#idMainMenu"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
/vxml>
videoEnjoy.jsp：
?xml version="1.0"encoding="UTF-8"?>
vxml version="2.1"xmlns="http：//www.w3.org/2001/vxml"
xmlns：xsi="http：//www.w3.org/2001/XMLSchema-instance"
xsi：schemaLocation="http：//www.w3.org/2001/vxml
http：//www.w3.org/TR/2004/WD-voicexml21-20040728/vxml.xsd">
form id="idVedioEnjoyMenu">
field name="user_choice0">
prompt>
audio expr="''">
http：//192.168.2.89：8080/testVXML/videoIndex.jsp
/audio>
!--該URL是提供給視頻合成器的截圖地址-->
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice0=='0'">
goto next="mainAudioMenu.vxml"/>
elseif cond="user_choice0=='1'"/>
goto next="#form1"/>
elseif cond="user_choice0=='2'"/>
goto next="#form2"/>
elseif cond="user_choice0=='3'"/>
goto next="#form3"/>
elseif cond="user_choice0=='4'"/>
goto next="#form4"/>
else/>
clear namelist="user_choice0"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
form id="form1">
field name="user_choice1">
prompt>
audio expr="'80001.mov'"/>
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice1=='0'">
goto next="#idVedioEnjoyMenu"/>
else/>
goto next="#form1"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
form id="form2">
field name="user_choice2">
prompt>
audio expr="'80002.mov'"/>
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice2=='0'">
goto next="#idVedioEnjoyMenu"/>
else/>
goto next="#form2"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
form id="form3">
field name="user_choice3">
prompt>
audio expr="'80003.mov'"/>
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice3=='0'">
goto next="#idVedioEnjoyMenu"/>
else/>
goto next="#form3"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
form id="form4">
field name="user_choice4">
prompt>
audio expr="'80004.mov'"/>
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice4=='0'">
goto next="#idVedioEnjoyMenu"/>
else/>
goto next="#form4"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
/vxml>
下面是一個(gè)簡(jiǎn)單的JSP頁(yè)面實(shí)例，在該實(shí)例中，引用了style.css中的樣式。顯示了一個(gè)欄目列表，代碼如下所示。
%@page language="java"contentType="text/html；charset=UTF-8"pageEncoding="UTF-8"%>
!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
html>
head>
meta http-equiv="Content-Type"content="text/html；charset=UTF-8"/>
title>主頁(yè)/title>
link href="%=request.getContextPath（）%>/css/style.css"type="text/css"rel="stylesheet">
meta http-equiv="pragma"content="no-cache">
meta http-equiv="cache-control"content="no-cache">
meta http-equiv="expires"content="0">
/head>
body>
div class="bodyDiv">
table>
tr>
td valign="bottom"align="left"
style="width:176px;background:url（%=request.getContextPath() %>/images/line2_bg.gif）repeat-x；border-bottom:1px solid#b0bec7；"height="19">
span class="titleFont">
font color="orange">b>請(qǐng)選擇欄目/b>/font>
/span>
/td>
/tr>
tr>
td>1.視頻欣賞/td>
/tr>
tr>
td>2.圖片欣賞/td>
/tr>
tr>
td>3.股票查詢/td>
/tr>
tr>
td>4.手機(jī)歸屬地查詢/td>
/tr>
tr>
td>5.加法游戲/td>
/tr>
tr>
td align="center">
按序號(hào)#確認(rèn)選擇
/td>
/tr>
/table>
/div>
/body>
/html>
運(yùn)行效果如下圖所示。
JSP欄目列表運(yùn)行效果
下面是另一個(gè)簡(jiǎn)單的JSP頁(yè)面實(shí)例，在該實(shí)例中，引用了style_cif.css中的樣式。該頁(yè)面是一個(gè)圖片展示頁(yè)面，代碼如下所示。
%@page language="java"contentType="text/html；charset=UTF-8"pageEncoding="UTF-8"%>
!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
%
String contextPath=request.getContextPath()；
%>
html>
head>
meta http-equiv="Content-Type"content="text/html；charset=UTF-8"/>
title>圖片欣賞展示頁(yè)/title>
link
href="%=request.getContextPath()%>/css/style_cif.css"
type="text/css"rel="stylesheet">
meta http-equiv="pragma"content="no-cache">
meta http-equiv="cache-control"content="no-cache">
meta http-equiv="expires"content="0">
/head>
body>
div class="bodyDiv">
table>
tr>
td valign="bottom"align="left"
style="width:352px;background:url（%=request.getContextPath() %>/images/line2_bg.gif）repeat-x；border-bottom：1px solid#b0bec7;"height="19">
span class="titleFont">
font color="orange">b>頤和園/b>/font>
/span>
/td>
/tr>
tr>
td align="center">
img
src="%=contextPath %>/images/yiheyuan.jpg"height="230">
/td>
/tr>
tr>
td align="center">
font color="green">1#上一張，2#下一張，0#返回/font>
/td>
/tr>
/table>
/div>
/body>
/html>
運(yùn)行效果如下圖。
JSP圖片展示頁(yè)面效果
