最近接到一个需求，需要往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视频中插入文字的更多相关文章

  1. php使用ffmpeg向视频中添加文字字幕

    这篇文章主要介绍了PHP使用ffmpeg给视频增加字幕显示的方法,实例分析了php操作ffmpeg给视频增加字母的技巧,具有一定参考借鉴价值,需要的朋友可以参考下. 本文实例讲述了PHP使用ffmpe ...

  2. FFMPEG，将字幕“烧进”MP4视频中

    原文地址:http://blog.csdn.net/ufocode/article/details/75475539 由于mp4容器,不像MKV等容器有自己的字幕流. MKV这种容器的视频格式中,会带 ...

  3. FFmpeg 向视频中添加文字

    原文地址:http://www.cnblogs.com/wanggang123/p/6707985.html FFmpeg支持添加文字功能,具体如何将文字叠加到视频中的每一张图片,FFmpeg调用了文 ...

  4. Ffmpeg 视频教程 向视频中添加文字

    Ffmpeg支持添加文字功能,具体如何将文字叠加到视频中的每一张图片,FFmpeg调用了文字库FreeSerif.ttf.当我们 用到ffmpeg 添加文字功能时 我们需要先下载改文字库,下载地址是h ...

  5. Qt 向word中插入文字（使用QAxWidget和QAxObject）

    pro 文件中要加入 CONFIG += qaxcontainer 2. main.cpp #include <QApplication> #include <QAxWidget&g ...

  6. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  7. 如何在html中插入视频

    如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性  用mp4格式 <vid ...

  8. HTML中插入视频

    最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...

  9. Android（java）学习笔记139：在TextView组件中利用Html插入文字或图片

    首先我们看看代码: 1.activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...

随机推荐

  1. Techme INC解读基因魔剪，带来的是机遇还是风险？

    10月7日,诺贝尔化学奖颁给了法国美国生物学家Jennifer Doudna和生物化学家Emmanuelle Charpentier,以表彰她们对新一代基因技术CRISPR的贡献,全网沸腾. CRIS ...

  2. Python爬虫_糗事百科

    本爬虫任务: 爬虫糗事百科网站(https://www.qiushibaike.com/)--段子版块中所有的[段子].[投票数].[神回复]等内容 步骤: 通过翻页寻找url规律,构造url列表 查 ...

  3. .Net -- NLog日志框架配置与使用

    NLog是适用于各种.NET平台(包括.NET标准)的灵活,免费的日志记录平台,NLog可将日志写入多个目标,比如Database.File.Console.Mail.下面介绍下NLog的基本使用方法 ...

  4. 用代码来实践Web缓存

    Web缓存是可以自动保存常见文档副本的HTTP设备.当Web请求抵达缓存时,如果本地有"已缓存的副本",就可以从本地存储设备而不是原始服务器中提取这个文档. 上面是<HTTP ...

  5. Django-1.11中文文档——操作关联对象

    关联对象参考 写在最前面--基础示例模型如下: from django.db import models class Blog(models.Model): name = models.CharFie ...

  6. Python 过滤字母和数字

    [前言]在写爬虫时,正则表达式有时候比较难写,一个是自己不熟练,二者数据分析提取数据千奇百怪. 一.好在python有个re模块,提供了很多更加简便的方法:可参考此文档:https://www.cnb ...

  7. 箭头函数this的指向

    箭头函数的this 什么是箭头函数,箭头函数是es6的新特性,其出现就是为了更好的表示(代替)回调函数 // 箭头函数 (arg1, arg2) => {} // 当箭头函数只有一个参数 arg ...

  8. 后端程序员之路 26、CAP理论

    可能是CAP理论的最好解释 - 西代零零发 - 博客频道 - CSDN.NEThttp://blog.csdn.net/dc_726/article/details/42784237 CAP理论 - ...

  9. MySQL提权 通过UDF

    目录 UDF是什么 命令执行 文本写入 Example: 远程写入 反弹Shell 提权 UDF是什么 参考:https://www.cnblogs.com/litlife/p/9030673.htm ...

  10. Redis基础及其相关面试题

    Redis持久化 一.持久化简介 Redis 的数据 全部存储 在 内存 中,如果 突然宕机,数据就会全部丢失,因此必须有一套机制来保证 Redis 的数据不会因为故障而丢失,这种机制就是 Redis ...