AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js 上传视频并预览

2024-01-08 95
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： js 上传视频并预览 
<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>
文章标签：
JavaScript
关键词：
JavaScript预览
JavaScript视频
JavaScript上传视频
雷霆半月斩掉你的板砖
目录
相关文章
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
wishCoding
186 63
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
wishCoding
59 6
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园健康驿站管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园健康驿站管理系统附带文章源码部署视频讲解等
wishCoding
59 5
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
wishCoding
47 5
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
wishCoding
65 3
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
wishCoding
52 3
hnrk7epeorhrk
|
5月前
|
Web App开发 移动开发 前端开发
技术经验分享：canvas+howler.js解决同页面视频、音频同时播放问题
技术经验分享：canvas+howler.js解决同页面视频、音频同时播放问题
hnrk7epeorhrk
142 0
疯狂的猿
|
14天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图，默认左侧是页面主要内容，minimap.js的好处就是在它的右侧形成一个快速定位通道，产生一个缩小版的页面，即预览效果，可以点击并快速定位到页面的某个位置。简单实用，欢迎下载！
疯狂的猿
28 0
游客qeoynko2nmbgk
|
2月前
|
SQL 安全 数据库
用html+javascript打造公文一键排版系统2：显示源码/显示预览、清除格式
用html+javascript打造公文一键排版系统2：显示源码/显示预览、清除格式
游客qeoynko2nmbgk
18 0
游客uqb2obj6pe7ry
|
4月前
|
JavaScript
网页CAD（JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
```markdown # CAD网页编程概览 - 使用mxcad库，实现CAD操作如删除、复制、镜像、移动和旋转。 - `erase()`方法删除实体，`clone()`配合`transformBy()`用于复制和编辑。 - `mirror()`和`transformBy(setMirror)`执行镜像操作，基于参考线。 - `move()`和`transformBy(setToTranslation)`实现移动功能。 - `rotate()`和`transformBy(setToRotation)`进行旋转，支持角度输入。 ```
游客uqb2obj6pe7ry
240 1
网页CAD（JS Vue 预览dwg)如何二次开发常用的CAD编辑功能