最近接到一个需求，需要往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. iframe 父子互传消息,父页面滚动，子页面触发父页面高度

    https://blog.csdn.net/qq_38366657/article/details/81538145 // 父页面的js<iframe id='TopHeader' src=&q ...

  2. 死磕以太坊源码分析之EVM如何调用ABI编码的外部方法

    死磕以太坊源码分析之EVM如何调用ABI编码的外部方法 配合以下代码进行阅读:https://github.com/blockchainGuide/ 写文不易,给个小关注,有什么问题可以指出,便于大家 ...

  3. Django Admin 实现三级联动的示例代码(省市区)===>小白级

    一  使用环境 开发系统: windows IDE: pycharm 数据库: msyql,navicat 编程语言: python3.7  (Windows x86-64 executable in ...

  4. 又长又细，万字长文带你解读Redisson分布式锁的源码

    前言 上一篇文章写了Redis分布式锁的原理和缺陷,觉得有些不过瘾,只是简单的介绍了下Redisson这个框架,具体的原理什么的还没说过呢.趁年前项目忙的差不多了,反正闲着也是闲着,不如把Rediss ...

  5. CSS过渡约束的计算

    CSS过度约束性质 什么是CSS过度约束 当没有开启绝对定位或固定定位时 水平布局必须要满足以下等式 探寻能够设置成auto的CSS属性 等式不成立(过度约束)时的几种情况 当margin与width ...

  6. Java实现贪吃蛇

    游戏界面基本布局 贪吃蛇是基于JFrame的一款小游戏.它主要有两部分组成,一个是显示区域,一个是按钮区域.这两个区域都用JPanel来实现. 首先需要创建一个基于JFrame的类,例如创建一个MyF ...

  7. Java跨平台原理与Java虚拟机（JVM）

    Java跨平台原理(字节码文件.虚拟机) C/C++语言都直接编译成针对特定平台机器码.如果要跨平台,需要使用相应的编译器重新编译. Java源程序(.java)要先编译成与平台无关的字节码文件(.c ...

  8. 如何使用 HttpReports 监控 .NET Core 应用程序

    简介 HttpReports 基于.NET Core 开发的APM监控系统,使用MIT开源协议,主要功能包括,统计, 分析, 可视化, 监控,追踪等,适合在中小项目中使用. github:https: ...

  9. 【Azure 微服务】Service Fabric, 使用ARM Template方式来更新SF集群的证书(Renew SF Certificate)

    问题描述 因证书过期导致Service Fabric集群挂掉(升级无法完成,节点不可用)一文中,描述了因为证书过期而导致了SF集群不可用,并且通过命令dd-AzServiceFabricCluster ...

  10. PTA甲级—常用技巧与算法

    散列 1078 Hashing (25 分) Quadratic probing (with positive increments only) is used to solve the collis ...