[英]How to add controls dynamically in html5 video on file upload
I have a button,here on click of the button I want to upload the video file and render one after other on multiple click.Its working fine but I am not able to add controls here,I need to add controls also dynamically. 我有一个按钮,单击此按钮,我要上传视频文件,然后单击多次以渲染另一个。它工作正常,但我无法在此处添加控件,我还需要动态添加控件。 Here is the plunker https://plnkr.co/edit/umHmYGJvT1a8WnVFxXAH?p=preview in which you can upload a video file and render it.but in that html5 video there is no controls.Here is code below.
这是the缩的https://plnkr.co/edit/umHmYGJvT1a8WnVFxXAH?p=preview ,您可以在其中上传视频文件并进行渲染。但是在html5视频中没有控件。以下是代码。
<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);
});
Use the controls attribute in video tags. 使用视频代码中的控件属性。
Example: 例:
<video src="" controls></video>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.