最近接到一个需求，需要往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. java中synchronized与Lock的异同

    本文转载自java中synchronized与Lock的异同 前言 synchronized和Lock通过互斥保障原子性,能够保护共享数据以实现线程安全,其作用包括保障原子性.可见性.有序性 常见问题 ...

  2. JS广度优先遍历

    自己用JS实现了 广度优先遍历 第一种用了数组的高阶函数,看起来有些复杂.然后思索着从可读性上优化了一下,孰优孰劣以后分析. var list = [{ id: "ab", chi ...

  3. 解决bs4在python中出现“ImportError: cannot import name ‘HTMLParseError‘”错误

    在使用BeautifulSoup4时候出现了ImportError: cannot import name 'HTMLParseError'的错误. 根本原因是BeautifulSoup在4.4.0以 ...

  4. Java8 关于stream.foreach()和stream.peek()的区别解析

    该思考来源于日常工作中,特记此心得. 思考:如何快速将list中的每个item内部属性值改变并进行其他流体操作呢? 下面做个测试:如何先在list中统一改变某属性的值,然后再根据某个属性取出该属性值最 ...

  5. mysql添加远程连接权限

    查看登录用户 mysql> select host,user,password from user; 想用本地IP登录,那么可以将以上的Host值改为自己的Ip即可. 这里有多个root,对应着 ...

  6. AndroidStudio 中 gradle.properties 的中文值获取乱码问题

    0x01 现象 在gradle.properties中定义了全局变量,然后从 build.gradle 中设置 app_name: resValue "string", " ...

  7. Slenium详解

    Slenium介绍 Selenium 是一个 Web 应用的自动化框架. 通过它,我们可以写出自动化程序,像人一样在浏览器里操作web界面. 比如点击界面按钮,在文本框中输入文字 等操作. 而且还能从 ...

  8. 十一. SpringCloud Alibaba

    1. SpringCloud Alibaba简介 1.1 为什么会出现SpringCloud Alibaba Spring Cloud Netflix项目进入到维护模式 什么是维护模式?=> 将 ...

  9. 2019 GDUT Rating Contest III : Problem E. Family Tree

    题面: E. Family Tree Input file: standard input Output file: standard output Time limit: 1 second Memory ...

  10. java实现一个点餐系统

    转载于blog.csdn.net/weixin_44219955 项目大体框架 菜品类(菜品id,菜品名,菜品类型,上架时间,单价,月销售,总数量) 管理员类(管理员id,账号,密码) 客户类(客户i ...