html5開發視頻字幕的程序

時間 2019-11-11

標籤 html5 html 開發視頻程序欄目 HTML5 简体版

原文原文鏈接

<!DOCTYPE html>

<head>

<title>使用video實現實時字幕的效果</title>

<style>

#box{

border: 1px solid red;

width: 400px;

height: 400px;

position: absolute;

}

video{

position: relative;

}

#caption{

position: relative;

left: 180px;

top: -60px;

font-size: 18px;

font-weight: bold;

}

</style>

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

//咱們的數據數組

var captionData=[];

//首先得到咱們的視頻對象

var myvideo=document.getElementByIdx_x("myvideo");

//此項表示加載以後執行如下的操做

//得到咱們存放字幕的地方

var mycaption=document.getElementByIdx_x("caption");

//讀入咱們的字幕數據

$.get("js/captions.js",function(text,status){

captionData=eval_r(text);

});

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

var csec=myvideo.currentTime;

//開始進行判斷

for(var i=0;i<captionData.length;i++){

//根據當前播放的時間跟咱們json的時間進行比較

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

//此時將字幕設置

mycaption.innerHTML=captionData[i].text;

mycaption.style.color=captionData[i].color||"#ff0";

}

},true);

</script>

</head>

<body>

</video>

</div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

html5開發 視頻字幕的程序

html5開發視頻字幕的程序