时间戳

首页 > 解决方案 > 如何从系统上传和覆盖animation.html文件并以HTML或ANGULAR覆盖视频

javascript - 如何从系统上传和覆盖animation.html文件并以HTML或ANGULAR覆盖视频

问题描述

嘿，我正在尝试构建一个应用程序，该应用程序具有允许用户从他的系统上传预先存在的 .HTML 文件的功能，其中包含一个简单的动画初始化

我想获取该文件并将 .HTML 文件中包含的动画覆盖在我的视频上并将其显示给用户。

有可能吗，如果可以，请帮助我。

body {
  background: #;
}

#fullScreenBox {
  height: 500px;
  width: 50%;
  background: #;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#hiddenBox {
  width: 50%;
  height: 500px;
  background: #;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}

#title {
  width: 100%;
  height: 150px;
  background: #;
  /*U can also use #*/
  position: absolute;
  top: 200px;
  font-family: arial;
  font-size: 50px;
  color: white;
  text-align: center;
  opacity: 0;
}

#subtitle {
  width: 100%;
  height: 50px;
  background: #;
  /*U can also use #*/
  position: absolute;
  top: 300px;
  font-family: arial;
  font-size: 50px;
  color: red;
  text-align: center;
  opacity: 0;
}

#line01 {
  width: 25%;
  height: 4px;
  background: white;
  /*U can also use #*/
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  color: white;
  opacity: 0;
}

#overlay {
  position: absolute;
  color: #FFF;
  text-align: center;
  font-size: 20px;
  padding: 10px 0;
  width: 50%;
  height: 500px;
  background: #;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#v {
  height: 500px;
  width: 100%;
}
<body data-control="10:30">

  <div id="fullScreenBox">
    <div id="overlay" class="">
      <div id="title" class="webvfx" data-animate='{
                start: 0,
                end: 1,
                ease: "linearTween",
                0%: {opacity:0; left:-1000px;},
                20%: {opacity: 1; left:0px;},
                90%: {opacity:1; left:0px;},
                100%: {opacity: 0; left:1000px;}
            }'>
        LONDON
      </div>
      <div id="line01" class="webvfx" data-animate='{
                start: 0,
                end: 1,
                ease: "linearTween",
                0%: {opacity:1; width: 0%;},
                20%: {opacity:1; width: 25%;},
                80%: {opacity:1; width: 25%;},
                100%: {opacity:1; width: 0%;}
            }'>

      </div>

      <div id="subtitle" class="webvfx" data-animate='{
                start: 0,
                end: 1,
                ease: "linearTween",
                0%: {opacity:0; left:1000px;},
                20%: {opacity: 1; left:0px;},
                90%: {opacity:1; left:0px;},
                100%: {opacity: 0; left:-1000px;}
            }'>
        City of Dreams!
      </div>
    </div>
</body>

这是我的 HTML 文件，其中包含一个简单的动画，例如在用户系统中

在我的应用程序中，当用户上传此文件时，我想在他上传时将此文件中包含的动画覆盖在视频上，无论如何，谢谢

标签： javascripthtmlangularffmpeghtml5-canvas

解决方案

推荐阅读