mp4视频中插入文字
最近接到一个需求，需要往mp4中动态插入文字，并且mp4中的乌云能在文字上有飘动的效果，一开始想用canvas，但是由于本人经验不足，没什么思路，看到css3有一个属性：mix-blend-mode，能满足烟雾在文字上飘动的效果，但是字体的颜色，和视频颜色叠加后，始终无法和视频中原有的文字效果一致。如下方左边是视频原有的文字效果，右边是动态插入的文字效果，文字的清晰度会比原有的低很多。
下面是我的代码：
<style>
@keyframes bounce-in {
0% {
font-size:90px;
padding-top: 164px;
}
100% {
font-size:28px;
padding-top: 260px;
}
}
@keyframes bounce-in-two {
0% {
font-size:65px;
padding-top: 199px;
}
100% {
font-size:28px;
padding-top: 260px;
}
}
html,body {
color:#CCCCCC;
width:360px;
height:640px;
padding:0;
margin:0;
}
.wrapper {
width:360px;
height:640px;
position:relative;
text-align: center;
}
.text,.text3{
font-size: 28px;
color: #949595;
font-weight: 500;
width: 100%;
line-height: 7px;
display: none;
padding-top: 260px;
display:none;
text-shadow: 1px 1px 1px black, -1px -1px 1px black;
font-weight: 900;
}
.text1{
position:absolute;
font-size: 20px;
color:black;
width:100%;
line-height: 46px;
top: 120px;
}
.textS{
font-size: 24px;
letter-spacing: 5px;
margin-left:5px;
}
video {
mix-blend-mode:hard-light;
position:absolute;
top:0;
left:0;
width:360px;
height:640px;
}
.logo-bottom{
position:absolute;
top: 10px;
left: 10px;
}
.logo-bottom img{
width: 90px;
}
.text2{
color: white;
font-size: 52px;
line-height: 52px;
margin: 0;
font-weight: 600;
}
.banner,.banner1{
position:absolute;
top: 24px;
width: 100%;
}
.banner1{
display:none;
top:68px;
}
</style>
</head> <body>
<div class="wrapper">
<video id="video" src="//auto.pcvideo.com.cn/oss/pcauto/vpcauto/2021/04/07/1617784555167-vpcauto-77524-1.mp4" controls="true"/></video>
<div class="text">
<p>2021</p>
<p>沧州车展</p>
</div>
<div class="text3">
<p>4月10-11日</p>
<p>沧州体育场</p>
</div>
<div class="banner">
<p class="text2">2021</p>
<p class="text2">沧州车展</p>
</div>
<p class="text1">4月10-11日<span class="textS">沧州体育场</span></p>
<div class="banner1">
<p class="text2" style="font-size: 48px;line-height: 79px;">4月10-11日</p>
<p class="text2" style="font-size: 48px;line-height: 79px;">在<span style="color:#3ad5dc;">沧州体育场</span></p>
</div>
<dt class="logo-bottom"><img src="//yh.pcauto.com.cn/gmaiche/images/lmclogo.png" alt=""></dt>
</div>
<script src="//js.3conline.com/min/temp/v1/lib-jquery1.10.2.js"></script>
<script>
;(function(){
var v = document.getElementById("video");
v.addEventListener('play', function () {
var i=0;
var o=0,o1=0;
var timer = window.setInterval(function () {
if(v.currentTime>0&&v.currentTime<2.2){
if(o==0){
$(".text").show();
$(".text").css('animation', 'bounce-in 0.4s ease-out 0s 1 normal forwards running');
}
o++;
}else{
$(".text").hide();
}
},20);
}); })();
</script>
尝试过另一种方式，不用mix-blend-mode，文字给个opacity:0.6，文字会清晰一点，但是，乌云飘动的效果不明显，因为这样乌云其实是在文字下层的，不太符合需求。我先记录下来，欢迎各位给点意见，看看要如何实现这个功能。
mp4视频中插入文字的更多相关文章
- php使用ffmpeg向视频中添加文字字幕
这篇文章主要介绍了PHP使用ffmpeg给视频增加字幕显示的方法,实例分析了php操作ffmpeg给视频增加字母的技巧,具有一定参考借鉴价值,需要的朋友可以参考下. 本文实例讲述了PHP使用ffmpe ...
- FFMPEG，将字幕“烧进”MP4视频中
原文地址:http://blog.csdn.net/ufocode/article/details/75475539 由于mp4容器,不像MKV等容器有自己的字幕流. MKV这种容器的视频格式中,会带 ...
- FFmpeg 向视频中添加文字
原文地址:http://www.cnblogs.com/wanggang123/p/6707985.html FFmpeg支持添加文字功能,具体如何将文字叠加到视频中的每一张图片,FFmpeg调用了文 ...
- Ffmpeg 视频教程 向视频中添加文字
Ffmpeg支持添加文字功能,具体如何将文字叠加到视频中的每一张图片,FFmpeg调用了文字库FreeSerif.ttf.当我们 用到ffmpeg 添加文字功能时 我们需要先下载改文字库,下载地址是h ...
- Qt 向word中插入文字（使用QAxWidget和QAxObject）
pro 文件中要加入 CONFIG += qaxcontainer 2. main.cpp #include <QApplication> #include <QAxWidget&g ...
- 【转】向HTML中插入视频并兼容所有浏览器的方法
原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...
- 如何在html中插入视频
如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性 用mp4格式 <vid ...
- HTML中插入视频
最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...
- Android（java）学习笔记139：在TextView组件中利用Html插入文字或图片
首先我们看看代码: 1.activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...
随机推荐
- SharedPreferences 数据传输中遇到的一些问题总结
原构想:MainActivity 设置两个按钮,btn1--跳转Main2Activity通过复选框组选择并提交,btn2--跳转Main3Activity通过RecycleView显示选择结果. 主 ...
- 哪些原因会导致JAVA进程退出?
本文转载自哪些原因会导致JAVA进程退出? 导语 JAVA进程消失可能有哪些原因? 那我们就开一篇文章说一下这个问题,其实很easy的,无外乎三种情况. linux的OOM killer杀死 JVM自 ...
- 开启算法之路，还原题目，用debug调试搞懂每一道题
文章简述 大家好,本篇是个人的第 3 篇文章. 承接第一篇文章<手写单链表基础之增,删,查!附赠一道链表题>,在第一篇文章中提过,在刷算法题之前先将基础知识过一遍,这样对后面的做算法题是很 ...
- [JAVA学习笔记]JAVA基本程序设计结构
一个简单的Java应用程序 public class FirstSample { public static void main(String[] args) { System.out.println ...
- JAVA 判断一个字符串是否是合法的日期格式？
采用SimpleDateFormat类的parse方法进行判断,如果转换不成功,就会出现异常.另外,还需要判断字符串的长度,若不判断,第二个字符串就会验证通过,实际上也不是合法的.话不多说,且看代码: ...
- docker启动ubuntu的桌面环境
一.概述 由于最近一段时间在家办公,国内服务器在阿里云,国外站点在aws.家里的移动宽带比较差,无法访问aws. 所以尝试在阿里云启动docker,找到一个lxde桌面环境的ubuntu镜像. 二.启 ...
- 如何进BAT，有了这个篇面试秘籍，成功率高达80%!!(附资料)
多年前自己刚来北京找工作的时候,面了一个星期 面了七八家公司才拿到一个offer.而上次跳槽面了不到10家公司基本全过而且都给到了期望的薪资,本来自己在面试前没想到能够这么顺利,回想起来还是自己准备的 ...
- AOP面试造火箭始末
本文已整理致我的github地址,欢迎大家 star 支持一下 这是一个困扰我司由来已久的难题,Dubbo 了解过吧,对外提供的服务可能有多个方法,一般我们为了不给调用方埋坑,会在每个方法里把所有异常 ...
- pytorch（14）权值初始化
权值的方差过大导致梯度爆炸的原因 方差一致性原则分析Xavier方法与Kaiming初始化方法 饱和激活函数tanh,非饱和激活函数relu pytorch提供的十种初始化方法 梯度消失与爆炸 \[H ...
- C# 应用 - 多线程 3) Task.Factory
1. 与 Task.Run() 的区别: 先看一下源码: public class Task : IThreadPoolWorkItem, IAsyncResult, IDisposable { pu ...