HTML5 带字幕播放器（类youtube字幕）

最新推荐文章于 2021-11-11 12:01:14 发布

weixin_33975951

最新推荐文章于 2021-11-11 12:01:14 发布

阅读量540

点赞数

文章标签： python json javascript ViewUI

原文链接：https://my.oschina.net/bighome/blog/264751

版权

2019独角兽企业重金招聘Python工程师标准>>>

暂时转帖，稍后修改

<!-- lang: html -->
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="GB2312">
    
        <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="C:\Users\Public\Videos\Sample Videos\music.mp4">
        </video>
        <div id="caption">播放开始</div>
    </div>
</body>
</html>

转载于:https://my.oschina.net/bighome/blog/264751