標籤：style color 使用 os 資料 width
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <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> <script src="js/jquery.js"></script> <script> 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); },true); </script></head><body> <div id="box"> <video controls width="400" id="myvideo"> <source src="video/first.mp4"> </video> <div id="caption">播放開始</div> </div></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
