html5音/视频标签及歌词同步

html5的功能日益强大,音视频标签更大大的增加了html5的竞争力.再次就说下新增的标签及常用属性;

<audio>您的游览器不支持音频播放</audio>

<video>您的游览器不支持视频播放</video>

通用属性:loop(播放次数),controls(控制插件),autoplay(自动播放)

那怎么通过检测音视频的播放来时时同步呢,很简单.只需一个简单的事件

obj.addEventListener(“timeupdate”,function(){

    this.duration(音视频的总时长)  (1)

    this.currentTime(当前的播放时间) (2)

    this.end(结束)  返回值为true/false

    this.paused(暂停) 返回值为true/false

    },false)

利用(1)(2)可以实现很多简单而实用的功能,例如:自定义进度条,可以根据(1)(2)两个值来实现;

同步歌词(后台传过来lrc的歌词):利用正则或者字符串操作,将时间与内容分离开,将时间转化成与this.currentTime类型相同的值。利用判断党时间与this.currentTime相同时,将内容显示,这样就简单的实现了歌词同步功能.若是想进一步的增加效果,只需在JS中增加几行简单的代码就可以搞定.

原文地址:https://www.cnblogs.com/xxiaomai/p/3450109.html