javascript - 如何在文件上传的html5视频中动态添加控件
问题描述
我有一个按钮,在这里单击按钮我想上传视频文件并在多次单击时依次渲染。它工作正常,但我无法在此处添加控件,我还需要动态添加控件。这是 plunker https://plnkr.co/edit/umHmYGJvT1a8WnVFxXAH?p=preview,您可以在其中上传视频文件并渲染它。但是在那个 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>
样式.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);
});
解决方案
在视频标签中使用控件属性。
例子:
<video src="" controls></video>
推荐阅读
- node.js - 在 ubuntu 上安装 npm 模块给我一个错误
- libgdx - RayHandler 不适合 Box2D 世界
- caching - 如何刷新 Chrome
- linux - ELF中“.note.ABI-tag”部分的意义是什么?
- android - 如何制作一个从mysql数据库下载动态表单并在填写后上传记录的android应用程序?
- scala - Scala 自定义集合无法在理解中选择正确的映射函数
- javascript - 如何将 xlink:href 绘制到画布上
- c++ - 使用 C++ 在 windows 下获取硬盘驱动器性能
- javascript - 如何在反应中使用json文件进行分页?
- java - 无法获取使用 selenium xpath 动态显示的双引号中的值