当前位置:编程学习 > C#/ASP.NET >>

问一个相当难的问题,怎样实现见面上视频文件的歌词同步(远程教育)

我这里是要做一个远程教育网站,现在有个关键的无法实现,想起来基本不可能,但是网上却有实现的,注意,该实现没有用任何插件

图像如上,左边是视频文件,右边就是文本区域。右边的蓝色框可以根据左右视频播放的进度而变换。相当于是歌词同步
我觉得难点就是怎样实现视频文件和网站文本的交互,或者WEB本身自带有这个功能的? --------------------编程问答-------------------- mark --------------------编程问答-------------------- 我是楼主,我再回复一下。如左右的文字,代码如下:


<a name="node01"></a><div id="t001s" style="tskclass"> 
        <B>一、我国的空间规划体系</B><BR>
        1.区域规划——区域资源的合理利用和生产力布局<BR>
        2.土地利用总体规划——城乡土地资源的合理利用<BR>
        3.城市规划——各级城镇的合理发展和布局<BR>
        4.三项规划具有密切的关系,需要协调一致<br>
        在评估规划中,评估有一条非常重要原则就是合法原则,就是评估、经济的对象必须是合法的。因此在进行房地产评估时,必须掌握很多相关的法律的知识,否则就会出现种种问题。</div>
              <a name="node02"></a><div id="t002s" style="tskclass">  例:2005年,广西某评估机构,评估一个矿业公司的破产项目,该公司要把财产、土地、房屋转给另一家公司。评估以后,职工认为评估价格过低,断定公司的经理和另一家公司勾结从中取利。职工生活受到影响,将其告到公安部门。<BR>
        通过分析调查,该评估公司工作态度随意。他们的估价违反了一个很大的错误,就是根据当地的城市规划的条件来评估的。<BR>
        一是城市规划规模很大,评估结果不准确;<br>
        二是规划不是法定规划,没有经过上级人民政府批准,评估结果不合法。评估的前提是错误的,所以在评估的过程中,一定是按照法律法规来办事,按照原则来办事。</div>
      <a name="node03"></a><div id="t003s" style="tskclass">  城市规划的编制,是具有法律依据,城市规划法早于《房地产规划法》,也早于《土地管理法》,今年修订正式改为《城乡规划法》,《城乡规划法》在2008年1月1日正式执行。<BR>
        <span class="font1415">房地产的开发方面的三类规划:一是区域规划,是由国家的发改委制定的规划,被称为“主体功能区规划”;二是土地利用总体规划,是由国土资源系统以土地资源的合理利用为核心的规划;</span><span class="double">三是城市规划</span><span class="font1415">,房地产的开展、房地产的评估根据《中华人民共和国城镇房地产管理法》主要是在城市的规范中实行的。城市规划跟房地产的开发、房地产的评估关系更为密切。</span><BR>
        三类规划关系相当密切,在新的《城乡规范法》中,提出了三者的关系,区域规划是城市规划的依据,城市规划的编制是根据区域规划制定发展目标、生产力的合理布局来编制。<BR>
        土地利用总体规划和城市规划是相互衔接的关系,在城市发展的布局中,土地利用的规模城市规划不能够超越土地利用总体规划。</div>
      <a name="node04"></a><div id="t004s" style="tskclass"><BR>
        <B>二、城市规划</B><BR>
        1.城市发展的纲领<BR>
        2.城市建设的蓝图<BR>
        3.城市管理的依据<BR>
        所谓城市规划,首先,城市发展的纲领,也就是说城市的发展,城市的社会、经济活动在这个空间里面包括的建设活动都要按照城市规划去发展。作为城市发展的纲领主要内容涉及到城市发展的方针、城市发展的战略;其次,城市规划是城市建设的蓝图;第三,城市规划是城市管理的依据。城市的一切建设活动都要依法有序的进行,城市规划管理的依据是城市规划。涉及的具体的形式就是规划部门给予建设的依据——两证一书,建设规划许可证、建设工程规划许可证和建设项目选意见书。</div>
      <a name="node05"></a><div id="t005s" style="tskclass"><BR>
  <div align="left" style="display:none" id=diaurl-0></div>

以下省略。。。。。。。。。。。。。。



应该是根据视频的进度来控制层显示,但是,怎样对视频进行操作,或者说怎样取得视频的进度?
--------------------编程问答-------------------- 有难度,帮顶 --------------------编程问答-------------------- 这个有难度哟,mark --------------------编程问答-------------------- 给你将个思路,我以前做过,首先你要把讲话人的讲课内容写到一个div里,格式要这样类型的
[00:02.00]周杰伦 - 稻香
[00:04.00]词:周杰伦 曲:周杰伦
[00:06.00]www.50004.com 
[00:08.00]好歌收藏 放飞心情
[00:10.00]
[00:30.86]对这个世界如
[00:32.50]果你有太多的抱怨
[00:34.38]跌倒了 
[00:35.48]就不敢继续往
然后通过JS同步播放,网上有代码。我做过类似的项目 --------------------编程问答-------------------- To   jiang_jiajia10

我就是在网上找了很久的代码都没有找到,能不能提供一下网上的代码,谢谢 --------------------编程问答-------------------- TO  jiang_jiajia10

我就是没有看见网上有代码,能不能提供一下网上代码的地址,非常感谢 --------------------编程问答-------------------- 去看看歌曲的网站就知道了啊
5楼的是真解
把歌词存成XML
用JS配合
或者FLASH的AS还能做出遮罩的歌词显示效果
--------------------编程问答-------------------- 关注. --------------------编程问答-------------------- 麻烦各位能不能说一下具体的解决方案。不要说这个好,那个好,或直接直接打个mark上来的 --------------------编程问答-------------------- 帮顶 --------------------编程问答-------------------- mark~ --------------------编程问答-------------------- up~~~关注 --------------------编程问答-------------------- 这样吧我给你个JS控制歌词同步播放的代码吧

<%--       <script type="text/javascript">
var lrc0;
var lrc1;
var min;
lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3));
var aboutplayer = document.getElementById("aboutplayer");
function lrcClass(tt)
{
  this.inr = [];
  this.min = [];

  this.oTime = 0;

  this.dts = -1;
  this.dte = -1;
  this.dlt = -1;
  this.ddh;
  this.fjh;

  lrcbc.style.width = 0;

  if(/\[offset\:(\-?\d+)\]/i.test(tt))
    this.oTime = RegExp.$1/1000;

  tt = tt.replace(/\[\:\][^$\n]*(\n|$)/g,"$1");
  tt = tt.replace(/\[[^\[\]\:]*\]/g,"");
  tt = tt.replace(/\[[^\[\]]*[^\[\]\d]+[^\[\]]*\:[^\[\]]*\]/g,"");
  tt = tt.replace(/\[[^\[\]]*\:[^\[\]]*[^\[\]\d\.]+[^\[\]]*\]/g,"");
  tt = tt.replace(/<[^<>]*[^<>\d]+[^<>]*\:[^<>]*>/g,"");
  tt = tt.replace(/<[^<>]*\:[^<>]*[^<>\d\.]+[^<>]*>/g,"");

  while(/\[[^\[\]]+\:[^\[\]]+\]/.test(tt))
  {
    tt = tt.replace(/((\[[^\[\]]+\:[^\[\]]+\])+[^\[\r\n]*)[^\[]*/,"\n");
    var zzzt = RegExp.$1;
    /^(.+\])([^\]]*)$/.exec(zzzt);
    var ltxt = RegExp.$2;
    var eft = RegExp.$1.slice(1,-1).split("][");
    for(var ii=0; ii<eft.length; ii++)
    {
      var sf = eft[ii].split(":");
      var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1]);
      var sso = { t:[] , w:[] , n:ltxt }
      sso.t[0] = tse-this.oTime;
      this.inr[this.inr.length] = sso;
    }
  }
  this.inr = this.inr.sort( function(a,b){return a.t[0]-b.t[0];} );

  for(var ii=0; ii<this.inr.length; ii++)
  {
    while(/<[^<>]+\:[^<>]+>/.test(this.inr[ii].n))
    {
      this.inr[ii].n = this.inr[ii].n.replace(/<(\d+)\:([\d\.]+)>/,"%=%");
      var tse = parseInt(RegExp.$1,10) * 60 + parseFloat(RegExp.$2);
      this.inr[ii].t[this.inr[ii].t.length] = tse-this.oTime;
    }
    lrcbc.innerHTML = "<font>"+ this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>") +"</font>";
    var fall = lrcbc.getElementsByTagName("font");
    for(var wi=0; wi<fall.length; wi++)
      this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth;
    this.inr[ii].n = lrcbc.innerText;
  }

  for(var ii=0; ii<this.inr.length-1; ii++)
    this.min[ii] = Math.floor((this.inr[ii+1].t[0]-this.inr[ii].t[0])*10);
  this.min.sort(function(a,b){return a-b});
  min = this.min[0]/2;

  this.run = function(tme)
  {
    if(tme<this.dts || tme>=this.dte)
    {
      var ii;
      for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){}
      if(ii<0) return;
      this.ddh = this.inr[ii].t;
      this.fjh = this.inr[ii].w;
      this.dts = this.inr[ii].t[0];
      this.dte = (ii<this.inr.length-1)?this.inr[ii+1].t[0]:aboutplayer.currentMedia.duration;

      lrcwt1.innerText = this.retxt(ii-4);
      lrcwt2.innerText = this.retxt(ii-3);
      lrcwt3.innerText = this.retxt(ii-2);
      lrcwt7.innerText = this.retxt(ii-1);
      lrcfilter.innerText = this.retxt(ii-1);
      lrcwt4.innerText = this.retxt(ii+1);
      lrcwt5.innerText = this.retxt(ii+2);
      lrcwt6.innerText = this.retxt(ii+3);
      this.print(this.retxt(ii));
      if(this.dlt==ii-1)
      {
        clearTimeout(lrc0);
        if(lrcoll.style.pixelTop!=0) lrcoll.style.top = 0;
        golrcoll(0);
        clearTimeout(lrc1);
        lrcfilter.filters.alpha.opacity = 100;
        golrcolor(0);
      }
      else if(parseInt(lrcoll.style.top)!=-20)
      {
        clearTimeout(lrc0);
        lrcoll.style.top = -20;
        clearTimeout(lrc1);
        lrcfilter.filters.alpha.opacity = 0;
      }
      this.dlt = ii;
    }
    var bbw = 0;
    var ki;
    for(ki=0; ki<this.ddh.length && this.ddh[ki]<=tme; ki++)
      bbw += this.fjh[ki];
    var kt = ki-1;
    var sc = ((ki<this.ddh.length)?this.ddh[ki]:this.dte) - this.ddh[kt];
    var tc = tme - this.ddh[kt];
    bbw -= this.fjh[kt] - tc / sc * this.fjh[kt];
    if(bbw>lrcbox.offsetWidth)
      bbw = lrcbox.offsetWidth;
    lrcbc.style.width = Math.round(bbw);
  }

  this.retxt = function(i)
  {
    return (i<0 || i>=this.inr.length)?"":this.inr[i].n;
  }

  this.print = function(txt)
  {
    lrcbox.innerText = txt;
    lrcbc.innerText = txt;
  }

  this.print("");
  lrcwt1.innerText = "";
  lrcwt2.innerText = "";
  lrcwt3.innerText = "";
  lrcwt4.innerText = "";
  lrcwt5.innerText = "";
  lrcwt6.innerText = "";
  lrcwt7.innerText = "";
  lrcfilter.innerText = "";
}

function lrcrun()
{
  with(aboutplayer)
  {
    lrcobj.run(controls.currentPosition);
  }
  if(arguments.length==0) setTimeout("lrcrun()",10);
}

function golrcoll(s)
{
  lrcoll.style.top = -(s++)*2;
  if(s<=9)
    lrc0 = setTimeout("golrcoll("+s+")",min*10);
}

function golrcolor(t)
{
  lrcfilter.filters.alpha.opacity = 110-(t++)*10;
  if(t<=10)
    lrc1 = setTimeout("golrcolor("+t+")",min*10);
}
window.onerror = function()
{return true;}
lrcrun();
</script>--%>
--------------------编程问答-------------------- mark --------------------编程问答-------------------- up --------------------编程问答-------------------- mark --------------------编程问答-------------------- 主要是把每行的时间调好,
应该是可以实现. --------------------编程问答-------------------- http://ajax.cnrui.cn/article/2/2/2006/20061116896.shtml
看看这个. --------------------编程问答-------------------- 楼主看看这里,这里就有你要的答案
http://www.cnblogs.com/happyday56/archive/2008/08/15/1268563.html --------------------编程问答-------------------- 真的是太麻烦了,搞到现在都没搞好 --------------------编程问答-------------------- 关注一下
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,