如何在 html 中设置视频源
How can I set video source in html?
我需要一种方法让用户选择本地视频文件作为我的html视频元素的源。
设置源代码似乎不起作用,因为我无法从标准 javascript 文件对话框中访问完整路径。
我尝试了以下方法:
//THE VIDEO ELEMENT
<video id="video1" muted>
<source src="" type="video/mp4" />
</video>
//THE DIALOG BUTTON TO SET VIDEO SOURCE
<input type='file' onchange="readURL(this);" />
<script>
var video = document.getElementById("video1");
function readURL(input) {
//THE METHOD THAT SHOULD SET THE VIDEO SOURCE
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
video.src = input.files[0]
};
}
}
</script>
如何创建一个按钮来选择本地视频文件并将其上传到HTML5视频元素中?
我做了一些更改,工作很好!我在Chrome和Firefox中进行了测试。
//THE VIDEO ELEMENT
<video id="video1" muted>
<source src="" type="video/mp4" />
</video>
//THE DIALOG BUTTON TO SET VIDEO SOURCE
<input id="file" type='file' onchange="readURL(this);" />
<script>
var video = document.getElementById("video1");
function readURL(input) {
//THE METHOD THAT SHOULD SET THE VIDEO SOURCE
if (input.files && input.files[0]) {
var file = input.files[0];
var url = URL.createObjectURL(file);
console.log(url);
var reader = new FileReader();
reader.onload = function() {
video.src = url;
video.play();
}
reader.readAsDataURL(file);
}
}
</script>
就我自己而言,我在单独的 js 和 html 文件中解决了它,如下所示:网页: <input id="file" type='file'/>
JavaScript:
document.getElementById('file').onchange = function(){
console.log('test');
readURL(this);
}
function readURL(input) {
//THE METHOD THAT SHOULD SET THE VIDEO SOURCE
if (input.files && input.files[0]) {
var file = input.files[0];
var url = URL.createObjectURL(file);
console.log(url);
var video = document.getElementById("video1");
var reader = new FileReader();
reader.onload = function() {
video.src = url;
video.play();
}
reader.readAsDataURL(file);
}
}
相关文章:
- 使用Facebook live API创建实时视频对象时的隐私设置
- 我可以设置HTML5文件上传的视频长度限制吗
- 如何在react中设置视频端组件的状态
- 如何在 html 中设置视频源
- HTML5视频标签 - 如何设置封面背景大小
- 选择数组的随机元素来设置Youtube视频ID API
- 如何为JavaScript函数设置变量以嵌入视频
- 设置计时器以等待为flash回退视频播放器加载swfobject脚本
- HTML5视频中设置currentTime的问题
- Wistia Javascript API-设置视频泡沫真实和隐藏社交按钮
- 如何在我的幻灯片上设置iframe视频
- 如何设置视频文件的预览,从输入类型='文件'中选择
- 如何使用javascript更改YouTube视频的播放器设置
- 设置 HTML5 视频窗口的当前时间.onscroll 滞后
- 如何设置视频播放器固定在页面上
- 如何设置视频广告在iframe youtube播放器API在javascript
- 如何从navigator.getUserMedia中设置视频src ?
- 如何设置视频标题- Youtube UploadWidget
- 如果我们需要为流创建一个URL,为什么我们可以设置视频.src为WebRTC流
- 无法设置视频.currentTime在html5视频使用jquery/javascript