视屏中实现字幕的简单小例子

最新推荐文章于 2024-04-29 14:22:47 发布

曼子猪

最新推荐文章于 2024-04-29 14:22:47 发布

阅读量340

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/lemon_manman/article/details/89141232

HTML5 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一种利用HTML5的video元素结合WebVTT字幕格式实现视频字幕显示的方法，并通过CSS自定义字幕样式。同时，通过JavaScript实现了视频播放、暂停、快进及静音等交互控制功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

文件目录的布局

webvtt.vtt 文件设置在各个时间段显示的详细文字，

html中通过在video中创建track元素引入字幕文件

css中可以通过伪元素设置字幕样式

html全部代码

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='width=device-width,initial-scale=1'/>
        <title>video_play</title>
        <style>
                video{
                    width:100%;
                    height:30vh;
                } 
                video::cue{
                    background-color: transparent;
                    color:black;
                    text-shadow:1px 1px 2px red;
                    font-size:40px;
                }
                video::cue(b){
                    color:yellow;
                }
                div{
                    display: inline-block;
                    width:100%;
                    line-height:40px;
                    text-align:center;
                    background-color: green;
                
                }
                input[type='button']{
                    display: inline-block;
                    padding:10px 10px;
                    background-color: black;
                    color:white; 
                    border:none;   
                }
        </style>
    </head>
    <body>
        <video width="100%" poster="./coverimg.jpg">
             <!-- 指定视频格式和视频地址 -->
	         <source type="video/mp4" src="http://f6.c.hjfile.cn/qiniu/classzt/20160803/90614_video_2.mp4" />
	         <!-- 指定视频字幕 -->
	         <track kind="subtitles" src="webvtt.vtt" default />
        </video>
        <div>
            <input type="button" class="playPause" value="play">
            <input type="button" class="fast" value='fast(x1)'/>
            <input type ='button' class='muted' value='muted'/>
        </div>
        <script type='text/javascript' src='./jquery.min.js'></script>
        <script>
            var vd = document.querySelector('video');
            var play = document.querySelector('.playPause');
            var fast = document.querySelector('.fast');
            var muted = document.querySelector('.muted');
            $('.playPause').on('click',function(){
                if($('.playPause').val() =='play'){
                    vd.play();
                    $('.playPause').val('pause');
                }else{
                    vd.pause();
                    $('.playPause').val('play');
                }
            });
            $('.fast').on('click',function(){
                if(vd.playbackRate>=8)vd.playbackRate=1;
                else vd.playbackRate*=2;
              $('.fast').val('fast(x'+vd.playbackRate+')');
            }); 
            $('.muted').on('click',function(){
                vd.muted = !vd.muted;
                $('.muted').val(vd.muted?'sound':'muted');
            });     
        </script>
    </body>
</html>

server.js

const path = require('path');
const fs = require('fs');
const http = require('http');

const app = http.createServer(function(req,res){
    var types= {
        '.html':"text/html",
        '.css' :'text/css',
        '.vtt' :'text/vtt'
    }
    var ext = path.extname(req.url);
    var type =types[ext] || 'text/plain';
    fs.readFile(path.resolve(__dirname,req.url),'binary',function(error,file){
        if(error){
            console.log(error);
            res.writeHead(404);
        }else{
            res.writeHead(200,{'Content-Type':type});
            res.write(file,'binary');
        }
        res.end();
    });
}).listen(8080);