<html> <body> <video style="height:auto;" src="" id="video0" controls="controls"></video> <input class="form-control" type="file" style="height:auto;" id="video" name="video" /> </body> </html> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script> // hTML5实现表单内的上传文件框，上传前预览视频，刷新预览video，使用HTML5 的File API, // 建立一个可存取到该file的url，一个空的video标签，ID为video0,把选择的文件显示在video标签中，实现视频预览功能。 // 需要选择支持HTML API的浏览器。 $("#video").change(function () { var objUrl = getObjectURL(this.files[0]); console.log("objUrl = " + objUrl); if (objUrl) { $("#video0").attr("src", objUrl); } }); //建立一个可存取到该file的url function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; } </script>
js 上传视频并预览
2024-01-08
29
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
js 上传视频并预览
目录
相关文章
|
3月前
|
JavaScript
|
3月前
|
JavaScript
前端开发
小程序
|
6月前
|
Web App开发
移动开发
JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件，Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件，Video 禁止鼠标右键下载
175
0
0
|
9月前
|
移动开发
编解码
Linux
|
6月前
|
JavaScript
数据安全/隐私保护
Python
|
1月前
|
Web App开发
前端开发
安全
|
4月前
|
移动开发
JavaScript
HTML5
|
5月前
|
JavaScript
前端开发
|
5月前
|
前端开发
JavaScript
|
5月前
|
数据采集
JSON
JavaScript
网络爬虫的实战项目：使用JavaScript和Axios爬取Reddit视频并进行数据分析
网络爬虫是一种程序或脚本，用于自动从网页中提取数据。网络爬虫的应用场景非常广泛，例如搜索引擎、数据挖掘、舆情分析等。本文将介绍如何使用JavaScript和Axios这两个工具，实现一个网络爬虫的实战项目，即从Reddit这个社交媒体平台上爬取视频，并进行数据分析。本文的目的是帮助读者了解网络爬虫的基本原理和步骤，以及如何使用代理IP技术，避免被目标网站封禁。
103
0
0
热门文章
最新文章
1
JavaScript基础语法（codewhy版本）（一）
2
JavaScript 权威指南第七版（GPT 重译）（三）(1)
3
JavaScript高级笔记-coderwhy版本（六）
4
JavaScript 权威指南第七版（GPT 重译）（六）(4)
5
JavaScript 权威指南第七版（GPT 重译）（四）(4)
6
JavaScript 权威指南第七版（GPT 重译）（二）(1)
7
JavaScript 权威指南第七版（GPT 重译）（六）(3)
8
JavaScript 权威指南第七版（GPT 重译）（三）(2)
9
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
10
在Blazor中使用Chart.js快速创建图表
1
监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
105
2
Java Script 中的垃圾回收机制有哪些缺点
13
3
描述 JavaScript 中的垃圾回收机制。
20
4
如何使用 JavaScript 操作 DOM？
15
5
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
19
6
JavaScript 中的数组方法有哪些？
10
7
JS设置日期为0时0分0秒
28
8
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
24
9
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
21
10
深入理解JavaScript中的闭包与作用域链
9