如何从系统上载和覆盖animation.html文件，以及如何以HTML或ANGULAR格式覆盖视频

如何解决如何从系统上载和覆盖animation.html文件，以及如何以HTML或ANGULAR格式覆盖视频

嘿，我正在尝试构建一个具有允许用户从其系统上载包含简单动画init的.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,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,0%: {opacity:0; left:1000px;},100%: {opacity: 0; left:-1000px;}
            }'>
        City of Dreams!
      </div>
    </div>
</body>

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

在我的应用程序中，当用户上传此文件时，我想以任何方式将该文件中包含的动画叠加在视频上谢谢

如何从系统上载和覆盖animation.html文件，以及如何以HTML或ANGULAR格式覆盖视频

如何解决如何从系统上载和覆盖animation.html文件，以及如何以HTML或ANGULAR格式覆盖视频

相关推荐