最近接到一个需求，需要往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. django学习-2.urls.py和view.py的相关知识点

    1.URL函数简单解析 1.1.url() 函数可以接收四个参数,分别是两个必选参数:regex.view,和两个可选参数:kwargs.name. def url(regex, view, kwar ...

  2. HTML页面顶部出现空白部分（#65279字符?）解决办法

    1.在火狐下面用Firebug,选择body,点编辑html的时候,看到是多出了一个这个代表的意思,还真不知道,搜索后了解到是一种中文的编码规则,   UTF-8不需要BOM来表明字节顺序.   制作 ...

  3. JS广度优先遍历

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

  4. react小白笔记

    diff算法主要是同级比较,生成数组,进行数组替换 reducer可以接收state,但是绝不能修改state 纯函数指的是:给固定收入,就一定有固定的输出,而且不会有任何副作用[不能例如:new d ...

  5. vscode好用插件总结

    做个记录:https://blog.csdn.net/xishining/article/details/90819481 1.Auto Rename Tag --自动重命名成对的HTML标记.假如你 ...

  6. MapString转Map

    当把map使用toString方法转换后,如何再转换为map对象呢?方法很简单,把字符串进行截取,依次存放到新的map中: public static Map<String,Object> ...

  7. 微信小程序切换标签改变样式

    微信小程序切换标签改变样式 wxml <!--顶部导航栏--> <view class="swiper-tab"> <view class=" ...

  8. 《Linux学习笔记：文本编辑最佳实践》

    [Linux文本编辑的四种方法] 例如,要想test.txt文件添加内容"I am a boy",test.txt在当前目录中 方法一:vi编辑法 [推荐] 打开终端,输入vi t ...

  9. Mac忘记密码

    1.启动电脑的时候,按住 Command+R,直到苹果的图标出现,松开,等待进入... 2.直接点击菜单栏上有个功能里面有 "终端" 功能,点击打开. 3.在终端页面里输入---& ...

  10. 【HTB系列】 靶机Swagshop的渗透测试详解

    出品|MS08067实验室(www.ms08067.com) 本文作者:是大方子(Ms08067实验室核心成员) 总结与反思 使用vi提权 magento漏洞的利用 magescan 工具的使用 靶机 ...