html5视频播放器字幕,html5带字幕的播放器

video{

width: 500px;

height: 300px;

}

浏览器不支持视频功能

播放

从头开始播放

暂停

function audioplay(){

document.getElementById("myaudio").play();

}

function audioplayfirst(){

document.getElementById("myaudio").currentTime=0;

document.getElementById("myaudio").play();

}

function audiopause(){

document.getElementById("myaudio").pause();

}

var vobj,tobj,cmdobj,telopdata=[];

var telopurl=‘telop.js‘;

window.addEventListener(‘load‘,function(){

vobj=document.getElementById(‘myaudio‘);

tobj=document.getElementById(‘telop‘);

cmdobj=document.getElementById(‘telopcommand‘);

//读入字幕数据

$.get(telopurl,function(text){

cmdobj.value=text;

telopdata=eval(text)

})

//播放时发生timeupdata事件时显示字幕处理

vobj.addEventListener("timeupdate",function(){

var csec=vobj.currentTime;

for(var i=0;i

if((telopdata[i].start<=csec)&&(telopdata[i].end>=csec)){

tobj.innerHTML=telopdata[i].text;

tobj.style.color=telopdata[i].color || "#fff";

//字体颜色

tobj.style.top=telopdata[i].top || "170px";

//纵向显示位置

tobj.style.fontSize=telopdata[i].fontSize || "24px";

//字符尺寸

return;

}

}

tobj.innerHTML="";

},true);

cmdobj.addEventListener("change",function(){

telopdata=eval(cmdobj.value);

},true);

},true);

//drawImage()绘制视频影响

window.addEventListener("load",function(){

var fps=1000/30;//1/30秒

var videoobj=document.getElementById("myaudio");

var canvasobj=document.getElementById("mycanvas");

setInterval(function(){

canvasobj.getContext("2d").drawImage(videoobj,0,0);

},fps);

},true);

原文：http://www.cnblogs.com/branton-design/p/6370554.html