手机模拟视频的实现

最新推荐文章于 2024-12-06 22:19:06 发布

原创最新推荐文章于 2024-12-06 22:19:06 发布 · 1.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#手机 #function #javascript #wap #border

Java/JSP-J2SE 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种针对WAP浏览器的技术限制而设计的模拟视频播放解决方案，通过按时序播放一系列图片并配合文本描述，实现了类似视频播放的效果。文中详细阐述了使用JSP+WML实现定时跳转和图片展示的方法，以及在WWW环境中利用JavaScript实现模拟视频播放的具体步骤。

前提：

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>
<!--
#bar, #barbackground{
position:absolute;
left:0;
top:140;
background-color:blue;
}

#barbackground{
background-color:black;
}

-->
</style>

/*
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>