<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body>
<style type="text/css">
video{
500px;
height: 300px;
}
</style>
<div id="contant">
<video id="myaudio" controls><!-- controls autoplay autobuffer-->
<source src="我的时尚爷爷.mp4">
<p>浏览器不支持<video>视频功能</p>
</video>
<div id="telop"></div>
<textarea id="telopcommand" cols="100" rows="8"></textarea>
</div>
<button onclick="audioplay()">播放</button>
<button onclick="audioplayfirst()">从头开始播放</button>
<button onclick="audiopause()">暂停</button>
<canvas id="mycanvas" width="500" height="300"></canvas>
<script type="text/javascript">
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<telopdata.length;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);
</script>
</body>
</html>