<!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>

html5开发<video>视频字幕的程序的更多相关文章

  1. HTML5 video视频字幕的使用和制作

    一.video支持视频格式: 以下是三种最常用的格式 1. ogg格式:带有Theora视频编码(免费)+Vorbis音频编码的Ogg文件(免费) 支持的浏览器:firefox.chrome.oper ...

  2. HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型

    现象:插入如下代码后仍然无法看视频(注:视频已确认为浏览器支持格式) <video controls="controls" width="500px" h ...

  3. 【HTML5】video视频

    当前,video 元素支持三种视频格式: 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5 ...

  4. HTML5将<video>视频设置为页面动态背景

    <!DOCTYPE html><html><head> <title>Operation Aborted Example</title> & ...

  5. html5 音频和视频（audio And video）

    1.音频和视频  Web 上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定 ...

  6. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...

  7. video字幕无法显示，video视频在google中无法控制快进

    video字幕(track)无法显示: 直接用关闭同源策略的浏览器打开你的HTML文件可以请求到字幕文件并显示字幕: 从hbuilder中打开html文件,在从里面打开google浏览器去浏览HTML ...

  8. 测试开发之前端——No9.HTML5中的视频/音频

    HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...

  9. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

随机推荐

  1. linux配置samba服务【原创】

    转载请注明出处http://www.cnblogs.com/paul8339/p/7509981.html 需求,windows服务器访问linux的共享文件,需要linux服务器安装并配置samba ...

  2. 安装 Xamarin for Visual Studio

    总得来说,Xamarin 有“联网自动安装”和“手动安装”两种方式. 说明:本文涉及得资源链接都是官网的,同时,在 我的网盘 也有相关备份. 现在,我就以 Windows 为例来大概说明……(-=-我 ...

  3. 记点事！ oracle 调用外部命令

    oracle执行系统命令   测试成功环境:windows XP+oracle 10g.window 2008 R2 + 11g   代码如下: www.2cto.com   Sql代码   crea ...

  4. NGUI优化之Drawcall

    今天在运行之前的程序时,无意中发现一个简单的menu菜单页面drawcall居然达到接近30了,这个数值感觉太高了. 后网上查询关于降低drawcall的方法,发现主要有以下几点: 1.少用Panel ...

  5. LightOJ - 1179 Josephus Problem（约瑟夫环）

    题目链接:https://vjudge.net/contest/28079#problem/G 题目大意:约瑟夫环问题,给你n和k(分别代表总人数和每次要数到k),求最后一个人的位置. 解题思路:因为 ...

  6. 搜索关键词智能提示suggestion

    转载自:stormbjm的专栏 题目详情:百度搜索框中,输入“北京”,搜索框下面会以北京为前缀,展示“北京爱情故事”.“北京公交”.“北京医院”等等搜索词,输入“结构之”,会提示“结构之法”,“结构之 ...

  7. 不修改系统日期和时间格式，解决Delphi报错提示 '****-**-**'is not a valid date and time

    假如操作系统的日期格式不是yyyy-MM-dd格式,而是用strtodate('2014-10-01')) 来转换的话,程序会提示爆粗 '****-**-**'is not a valid date ...

  8. Asp.net gzip压缩的启用

    gzip压缩使用一种压缩算法,对网页内容进行压缩,从而减小了网页体积.使用gizp压缩后减小了服务器的带宽.提高了网页的打开速度.下边看看我找到的一个asp.net中启用gzip压缩方案. 首先,我们 ...

  9. cordova 导致css中绝对定位top:0会被顶到视图之外

    IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...

  10. ubuntu各种软件安装-装机整套系列

    首先声明,本人系统ubuntu 14.04.1 LTS, 以下所有软件均安装于该系统. 一. 首先在windows下删除ubuntu,删除方法如下: 1.进入win7,下载个软件MbrFix,放在C: ...