您的位置：首页 > 其它

手机模拟视频的实现

2006-03-14 09:39 176 查看

前提：

WAP浏览器技术限制，视频在线播放不能像WWW网站那样流畅自如。考虑到用户喜好，需要实现手机视频在线播放功能。

解决方案：

模拟视频播放，是模仿视频的效果，所做的一种图片播放形式。功能主要是：将已有图片，按时序在一定时间间隔内顺次播放，并且在外观上达到视频播放器的效果。
模拟视频播放需要的资源是一定量的文字和图片资料，图片的数量大约在20－30张左右为佳。一般采用在已有的视频上，按时间间隔截取获得图片。对于视频中的音频部分，则转由文字描述代替。
模拟视频播放功能的实现如下：对于一个模拟视频记录，程序取出所有的图片地址和与之适配的文字说明，按一定时间间隔刷新页面，更换显示图片，知道播放结束停止。并在页面上增加类似播放器的控制按钮，实现用户与程序交互，控制模拟视频播放进度。

具体实现：

JSP+WML，在分页功能的基础上，实现定时跳转下一页，显示图片，达到预定播放的功能

//定义页面跳转参数
long artSN = (null==request.getParameter("artSN"))?1:Long.parseLong(request.getParameter("artSN"));
//取得资讯页数
long argPage=(null==request.getParameter("argPage"))?1:Long.parseLong(request.getParameter("argPage"));
//取得播放是否自动播放标识
int argPlayFlg=(null==request.getParameter("argPlayFlg"))?0:Integer.parseInt(request.getParameter("argPlayFlg"));

在WML里卡片设置定时跳转功能：
<card id="wapcontent" title="<%=strtitle%>" ontimer="wap1_vod_detail.jsp?<%=strPara%>artSN=<%=artSN%>&argPage=<%=argPage+1%>">

取得当前图片地址
/*根据prod_vod_id,pageContSN 取得图片地址 */
ResContentBody contBodyBean = rp.getResContentBodyByCTFNRSN(11,"128X128",pageContSN);

显示图片，并判断暂停，播放，停止三个按钮的状态
if (contBodyBean!=null) {
%>
<img src="<%=picurl%><%=contBodyBean.getUrl()%>" alt="pic"/><br/>
<%
if(argPlayFlg==0) {
if(argPage<totalPage) {
%>
<a href="wap1_vod_detail.jsp?<%=strPara%>artSN=<%=artSN%>&argPage=<%=argPage%>&argPlayFlg=1"><img src="image/vod/btn_pause.gif" align="center"/></a>
<%
} else if(argPage==totalPage) {
%>
<a href="wap1_vod_detail.jsp?<%=strPara%>artSN=<%=artSN%>&argPage=1&argPlayFlg=0"><img src="image/vod/btn_play.gif" align="center"/></a>
<%
}
} else {
if (argPage==totalPage) {
argPage=1;
}

%>
<a href="wap1_vod_detail.jsp?<%=strPara%>artSN=<%=artSN%>&argPage=<%=argPage%>&argPlayFlg=0"><img src="image/vod/btn_play.gif" align="center"/></a>
<%
}
%>
<a href="wap1_vod_detail.jsp?<%=strPara%>artSN=<%=artSN%>&argPage=<%=totalPage%>&argPlayFlg=1"><img src="image/vod/btn_stop.gif" align="center"/></a>剩余:<%=totalPage-argPage%><br/>

<%
}

进度条显示

<small>
<%
for (int m=0;m<(int)argPage;m++) {
out.print("●");
//out.print("<img src=/"image/p.gif/"/>");
}
for (int j=(int)argPage;j<totalPage;j++) {
//out.print("<img src=/"image/s.gif/"/>");
out.print("○");
}
%>
</small>

定义跳转时间间隔

<%
if((0==argPlayFlg)&&(argPage<totalPage)) {
%>

<timer value="30"/>
<%
}
%>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
附加说明：有些手机WAP不支持<meta定时跳转的标签，可采用ontimer=url的方式实现，支持<meta手机的可用<meta http-equiv="Refresh" content="时间间隔,跳转地址"/>来实现。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
附：WWW里JavaScript实现模拟视频播放

只贴一下源代码，本机调试通过，大家研究vod.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<style>

</style>

<script language="JavaScript1.2">

/*
Dynamic Progress Bar- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/

//1) Set the duration for the progress bar to complete loading (in seconds)
//图片总数
var duration=12

//2) Set post action to carry out inside function below:
function postaction(){
//Example action could be to navigate to a URL, like following:
//window.location="http://www.dynamicdrive.com"
}

///Done Editing/////////////
var clipright=0
var widthIE=0
var widthNS=0
var picname=1
var cutdown=12
var playFlg=false

function initializebar(){
document.all.clock.innerHTML=cutdown
document.all.pic1.src="1.jpg";
if (document.all){
baranchor.style.visibility="visible"
widthIE=bar.style.pixelWidth

//间隔时间
startIE=setInterval("increaseIE()",1000)
}
if (document.layers){
widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
document.baranchorNS.document.barNS.clip.right=0
document.baranchorNS.visibility="show"
//add

startNS=setInterval("increaseNS()",1000)
}
}

function increaseIE(){
if (!playFlg)
{

pic1.src=picname+".jpg"
picname = picname + 1
cutdown = cutdown - 1
document.all.clock.innerHTML=cutdown

//如果播放到最后一幅画面,播放按钮为PLAYoN
if (cutdown==0)
{
playControl.src="btn_play_on.gif";
duration=12;
clipright=0;
picname=1;
cutdown=12;
playFlg=true;
}
bar.style.clip="rect(0 "+clipright+" auto 0)"
window.status="Loading..."
if (clipright<widthIE)
//区分成多少个
clipright=clipright+(widthIE/(duration*1));

else{
window.status=''
clearInterval(startIE)
postaction()
}
}
}

function increaseNS(){
if (clipright<101){
window.status="Loading...";
document.baranchorNS.document.barNS.clip.right=clipright;
//区分成多少个
clipright=clipright+(widthNS/(duration*1));

}
else{
window.status=''
clearInterval(startNS)
postaction()
}
}

function changePlay(obj) {
playFlg = !playFlg;
if (playFlg)
{
obj.src="btn_play_on.gif";

} else {
obj.src="btn_pauz_off.gif";
if (cutdown==0)
{
duration=12;
clipright=0;
picname=1;
cutdown=12;
bar.style.visibility="visible";
}
}
}

function stopPlay() {
clipright = 100;

bar.style.visibility="hidden";

playControl.src="btn_play_on.gif";
pic1.src="12.jpg";
cutdown=0;
picname=1;
document.all.clock.innerHTML=cutdown;
playFlg=true;

}

window.onload=initializebar
</script>
<script language="JavaScript1.2">
if (document.all){
document.write('<div id="baranchor" style="position:relative;width:100px;height:3px;visibility:hidden;">')
document.write('<div id="barbackground" style="width:100px;height:3px;z-index:9"></div>')
document.write('<div id="bar" style="width:100px;height:3px;z-index:10"></div>')
document.write('</div>')
}

</script>
<table border=0 cellpadding=0 cellspacing=0>
<tr><td>
<img name="playControl" src="btn_pauz_off.gif" alt="play" border=0 onClick="changePlay(this)">
<img name="stopControl" src="btn_stop.gif" alt="stop" border=0 onClick="stopPlay()">

</td>
<td>计时:<span id="clock"></span></td>
</tr>
</table>
<img name="pic1" src="1.jpg"/>
<ilayer name="baranchorNS" visibility="hide" width=100 height=3>
<layer name="barbackgroundNS" bgcolor=black width=100 height=3 z-index=10 left=0 top=140></layer>
<layer name="barNS" bgcolor=blue width=100 height=3 z-index=11 left=0 top=140></layer>
</ilayer>

</BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航