网页内嵌的视频添加 vtt 外挂字幕

最新推荐文章于 2022-08-14 21:48:11 发布

wcy7916

最新推荐文章于 2022-08-14 21:48:11 发布

阅读量1.1w

点赞数 1

分类专栏：随笔文章标签： vtt 视频字幕

本文链接：https://blog.csdn.net/wcy7916/article/details/80881667

版权

随笔专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果：

这里写图片描述

代码

这里写图片描述

track标签加个字幕文件的链接就行了。

 <video class="video" id="video" preload="none" webkit-playsinline="true" src="@(ViewBag.VideoUrl)" poster="@(ViewBag.OriginImage)" playsinline="playsinline" controls="controls">
  <track src="@ViewBag.SubtitleUrl" srclang="zh"  kind="subtitles" default>
</video>

样式

::cue {
    background: none;
    color: #fff;
    text-shadow: 3px 3px 5px #000000;
    font-size: 12px;
}

notice

因为是在项目中，视频的字幕是根据视频的不同而动态变化的，所以vtt字幕文件需要后台提供，格式如下
这里写图片描述
如果网页不显示字幕，查看一下，请求头部

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wcy7916

关注关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

python用正则获取字幕中的文本

sfwwdd的博客

05-04

197

如果字幕中是中英双字幕，则将它们一起匹配出来，再拼凑在一起。打开字幕观察它的格式，一般为序号，时间线，字幕文本，回车。使用正则表达式中的findall()函数，应用.*贪婪模式匹配所有的字幕文本，从而舍弃不需要的时间线和序号。首先去字幕库或字幕网站得到字幕文件，格式一般为srt、ass、Webvtt、STL等，将格式修改为后缀txt文件，可以在python中读取。[（‘中文字幕1’，‘英文字幕1’），（‘中文字幕2’，‘英文字幕2’），（‘中文字幕3’，‘英文字幕3’）…\d+\n是第一行的序号，.

Aliplayer中自定义添加字幕的实现

白起的博客

03-23

2189

参考了阿里云的博客:https://my.oschina.net/u/1464083/blog/2999343 VTTCue官方文档:https://developer.mozilla.org/en-US/docs/Web/API/VTTCue 字幕文件的格式为vtt 创建播放器 var player = new Aliplayer({ "id": "player-co...

1 条评论您还未登录，请先登录后发表或查看评论

vue-marquee:vue的字幕字幕插件

05-17

水平字幕 vue的字幕字幕插件构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。 #Api < template> < div xss=removed> < div xss=removed><Marquee xss=removed></Marquee></div>

vtt或srt字幕挂载

思过留痕

01-21

1万+

遇到vtt字幕与视频分离情况，如何在视频上加载字幕呢？如若字幕格式是srt就省去了一转化的步骤。vtt格式必须转化为srt格式，如下： 1、用notebook++或其他编辑器打开，并将开头的WEBVTT字样去掉； 2、将其复制，放到一记事本中，名字保证和视频名字一致，文件后缀为srt，切记，一定还有中文的要保证，是unicode的！（记事本另存为时最下方设置unicode） 3、下载一个

html5 video 外挂字幕[webVTT]研究

weixin_33809981的博客

02-02

1582

html5 video 外挂字幕[webVTT]研究目录 WebVTT是什么 WebVTT内容设置字幕样式为字幕设置位置章节chapters解释 webVTT 详解 webVTT实现浏览器行为浏览器支持情况 WebVTT是什么 html5 video 外挂字幕英文简称webVTT【video text track 网络视频文本轨道...

格式工厂 vtt字幕加入视频

whatday的专栏

08-14

7024

2, 字幕的样式是可以改变的，大小，颜色，在第三步附加字幕那里可以更改，实践证明，字幕大小默认，颜色白色，边框黑色，是比较好的，也可以根据个人需要更改字幕设置。和字幕显示的属性，sub 文件就是字幕数据本身，由于是图片格式，所以比较大，动辄 10M 以上(不过我们可以将之压缩为 rar 文件，在。在第三步附加字幕那里可以更改，实践证明，字幕大小默认，颜色白色，边框黑色，是比较好的，也可以根据个人需要更改字幕设置。点击输出配置，下拉找到附加字幕，选择字幕文件路径，加入字幕。现在比较流行的字幕格式，分为。.

.vtt 字幕无法加载

xiaobenben_的博客

12-13

1万+

Coursera一些网络课程，用播放无法加载.vtt格式的字幕文件。解决：用文本文档方式打开.vtt文件，发现文件中的内容和.srt基本一致，只不过前面多了WEBVTT这6个字母。所以：只需要直接删除.vtt文件中的前6个字母WEBVTT，然后保存为.srt格式，播放器就能自动加载了。

FFMPEG向视频文件中添加字幕

02-22

实际上，FFmpeg支持多种视频格式，包括MKV、AVI、WEBM等，只要这些格式的视频文件支持内嵌字幕，FFmpeg都可以处理。只需将命令中的输入和输出文件名替换为你需要的格式即可。 `CGDrawText`可能是FFmpeg中另一种添加...

视频字幕例子

12-22

在视频制作和播放领域，字幕的添加是至关重要的，特别是在多语言环境中，它能帮助听障人士理解内容，或者为非母语观众提供翻译。本文将深入探讨视频字幕的相关知识点，包括字幕的类型、格式、制作过程以及如何在视频...

字幕格式转换工具包v1

07-07

通过该工具，可以实现字幕格式之间相互转换，支持常用格式，例如vtt，srt

解决Chrome无法显示本地的.vtt字幕文件 (如何让本地HTML运行在Server上)

土豆大叔的博客

08-11

2143

解决Chrome无法显示本地的.vtt字幕文件问题描述解决方法问题描述在使用 Chrome 打开本地的html后，播放html中内嵌的视频时，不显示加载的 .vtt 文件字幕解决方法需要把 html 文件运行在server 上才能正常显示，可以给Chrome安装一个下图所示的插件安装后启动，选择你的HTML文件所在文件夹，然后点击本地URL 即可使视频出现字幕！ ...

原生视频外挂字幕开启关闭

weixin_44445363的博客

07-22

259

第一步：定义一个div，定义到字幕要显示的区域 //视频 <video src="${VideoList.vd_filepath}" id="myvideo" autoplay="true" controls="controls" width="854" height="450"></video> /* 字幕div*/ <div style="cursor: pointer">

浏览器js视频播放器外挂srt字幕（vue为例）

Zyrzka的博客

08-28

3648

这里以vue为例啦第一次外挂字幕需求，mark一下～一、主要函数，将文本转化为易用的数组 1、获取srt内容（本次srt是get获取的） async getSrt(url,index){ let srtText = await fileApi.getStr(url) if(srtText.success){ let srtItem = this.createSrtArr(srtText.data) //对应的多种语言的srt字幕的map，序号为k

React Native视频加字幕（内加外）

koufulong的博客

06-25

593

直接贴代码吧： import React from 'react'; import {View, ScrollView} from 'react-native'; import axios from "axios" import {Header} from "../common/ItemHeader"; import Video, {TextTrackType} from 'react-nativ...

多媒体与嵌入

热爱分享，热爱记录

02-06

4117

多媒体与嵌入本文所有内容来自于MDN，学习笔记一、概述本模块要探索怎样用HTML来让你的网页包含多媒体，包括可以包含图像的不同方式，以及怎样嵌入视频，甚至是整个其他的网页。二、HTML中的图片 2.1图片标签 <img>标签用于放置图片 <img src="images/dinosaur.jpg">//相对路径 <img src="https://www.example.com/images/dinosaur.jpg"> //绝对路径注意：

如何使用格式工厂将vtt文件格式字幕加在视频文件中

qq_41909760的博客

09-28

1万+

如何使用格式工厂将vtt文件格式字幕加在视频文件中可以直接看第三步-整合流程一，字幕格式现在比较流行的字幕格式，分为图形格式和文本格式两类。图形格式字幕由 idx 和 sub 文件组成，idx 相当于索引文件，里面包括了字幕出现的时间码和字幕显示的属性，sub 文件就是字幕数据本身，由于是图片格式，所以比较大，动辄 10M 以上(不过我们可以将之压缩为 rar 文件，在 unrar.dl...

html video添加字幕,HTML5标签：video元素的使用方法及作用

weixin_39867066的博客

05-31

2571

html元素标签是html5中新增的标签，用于定义网页文档中的视频资源文件，有关标签的使用方法及作用详解如下：标签的定义标签可以把指定的视频资源文件插入页面中播放；标签是 HTML 5 中新增的标签。标签语法：提示文本标签可以设置播放视频的高度和宽度，默认单位是px，而src属性用来指定视频资源的URL地址；在和之间的“提示文本”，是用于当前浏览器不支持标签时显示的文本内容；标签支持的视频格...

webvtt字幕转srt字幕方法