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

Question

我有一个按钮，单击此按钮时我要上传视频文件，然后单击多次以渲染另一个。它工作正常，但我无法在此处添加控件，我还需要动态添加控件。 这是Regex demo插件，您可以在其中上传视频文件并进行渲染。但是在html5视频中没有控件。以下是代码。

html

<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>

style.css

/* 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;

}

index.js

// 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); 
});

Answer 1

使用视频代码中的控件属性。

示例：

<video src="" controls></video>