Javascript 如何在html5视频文件上传中动态添加控件

Javascript 如何在html5视频文件上传中动态添加控件,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个按钮,在这里点击按钮我想上传视频文件,并在多次点击后呈现一个又一个。它工作正常,但我不能在这里添加控件,我还需要动态添加控件。 这是一个plunker,您可以在其中上传视频文件并进行渲染。但是在html5视频中没有控件。下面是代码 html index.js 使用视频标记中的“控件”属性 例如: 我已经解决并更新了代码,我刚刚添加了$(“video”).prop(“controls”,true);去霉 <link rel="stylesheet" href="css/style.c

我有一个按钮,在这里点击按钮我想上传视频文件,并在多次点击后呈现一个又一个。它工作正常,但我不能在这里添加控件,我还需要动态添加控件。 这是一个plunker,您可以在其中上传视频文件并进行渲染。但是在html5视频中没有控件。下面是代码

html index.js
使用视频标记中的“控件”属性

例如:


我已经解决并更新了代码,我刚刚添加了$(“video”).prop(“controls”,true);去霉
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <input type="file" id="file1" name="image" accept="video/*" capture style="display:none" />
  <span id="upfile1" style="cursor:pointer">upload button1</span>
</p>
<div id="demo1">
<script  src="js/index.js"></script>
/* Styles go here */

input {
  font-size: 20px;
  height: 50px;
}

.imagediv {
  float: left;
  margin-top: 50px;
}

.imagediv .showonhover {
  background: red;
  padding: 20px;
  opacity: 0.9;
  color: white;
  width: 100%;
  display: block;
  text-align: center;
  cursor: pointer;
}

#upfile1 {
  background: red;
  padding: 20px;
  opacity: 0.9;
  color: white;
  width: 10%;
  display: block;
  text-align: center;
  cursor: pointer;
}

#demo img,
#demo1 img {
  width: 200px;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
#demo1 video{
    width:300px;

}
// Code goes here

$(document).ready(function(e) {
    //$('video').on('click',function(){
        $("#demo1").delegate("video", "click", function(){
        this.paused?this.play():this.pause();
        });
  $("#upfile1").click(function() {    
    $("#file1").trigger('click');
  });
   $('input:file').change(
            function(){
                if ($(this).val()) {
                    $("#demo1").show();

                } 
            }
            );
            var inputs = document.querySelectorAll('input[type=file]');
inputs.forEach(function(input) {
  input.onchange = function() {
    var file = this.files[0];
    displayAsImage(file);   
  }; 
});
function displayAsImage(file) {
  var imgURL = URL.createObjectURL(file),
    img = document.createElement('video');
  img.onload = function() {
    URL.revokeObjectURL(imgURL);
  }; 
  img.src = imgURL;
  document.getElementById("demo1").appendChild(img);
  $("video").prop("controls",true); 
}
$("video").prop("controls",true); 
});