最近接到一个需求，需要往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. DHCP (Dynamic Host Configuration Protocol )协议的探讨与分析

    DHCP (Dynamic Host Configuration Protocol )协议的探讨与分析 问题背景 最近在工作中遇到了连接外网的交换机在IPv6地址条件下从运营商自动获取的DNS地址与本 ...

  2. nvidia-smi command not found Ubuntu 16.04

    issue:     nvidia-smi command not found Ubuntu 16.04 https://askubuntu.com/questions/902636/nvidia-s ...

  3. 喜忧参半的SQL Server触发器

    SQL Server触发器在非常有争议的主题.它们能以较低的成本提供便利,但经常被开发人员.DBA误用,导致性能瓶颈或维护性挑战. 本文简要回顾了触发器,并深入讨论了如何有效地使用触发器,以及何时触发 ...

  4. js引入jquery问题

    写jsp的时候明明已经引入了jquery组件,但是总是报错如下图 jsp代码如下 <%@ page language="java" contentType="tex ...

  5. 痞子衡嵌入式：自识别特性(Auto Probe)可以让i.MXRT1060无需FDCB也能从NOR Flash启动

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是自识别特性(Auto Probe)可以让i.MXRT1060无需FDCB也能从NOR Flash启动. 接着上篇文章 <了解i.M ...

  6. 【DB宝41】监控利器PMM的使用--监控MySQL、PG、MongoDB、ProxySQL等

    目录 一.PMM简介 二.安装使用 三.监控MySQL数据库 MySQL慢查询分析 四.监控PG数据库 五.监控MongoDB数据库 六.监控ProxySQL中间件 一.PMM简介 之前发布过一篇Pr ...

  7. （报错解决）Exception encountered during context initialization

    转: (报错解决)Exception encountered during context initialization 关键词 JavaEE JavaWeb eclipse XML AspectJ ...

  8. 使用Groovy构建DSL

    DSL(Domain Specific Language)是针对某一领域,具有受限表达性的一种计算机程序设计语言. 常用于聚焦指定的领域或问题,这就要求 DSL 具备强大的表现力,同时在使用起来要简单 ...

  9. navicat 给mysql 添加存储过程（函数）

    BEGIN DECLARE i INT default 0; DECLARE num int default 0; DECLARE count1 int default 0; DECLARE coun ...

  10. beego 框架用的页面样式模板

    https://themequarry.com/category/free 页面样式