找回密码
 立即注册
快捷导航

[Html/Css/JS] 预览本地视频文件

[复制链接]
妙笔生花 2023-8-22 09:12:54 | 显示全部楼层

预览本地视频文件5729 作者:妙笔生花 帖子ID:701

<!DOCTYPE html> 
<html> 
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>预览本地文件</title>
        <style type="text/css">
        video{
            background-color: #000;
        }
        </style>
        <script type="text/javascript"> 
        /** 
        * 从 file 域获取 本地图片 url 
        */ 
        function getFileUrl(sourceId) { 
            var url; 
            if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
                url = document.getElementById(sourceId).value; 
            } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            } 
            return url; 
        } 

        /** 
        * 将本地图片 显示到浏览器上 
        */ 
        function preImg(sourceId, targetId){ 
            var url = getFileUrl(sourceId);
            console.log(sourceId,targetId);
            var imgPre = document.getElementById(targetId); 
            imgPre.src = url; 
        } 
        </script>
    </head> 
    <body> 
        <form action=""> 
            <input type="file" name="imgOne" id="imgOne" />
            <!-- <img id="imgPre" src="" width="300px" height="300px" style="display: block;" />  -->
            <video id="imgPre" width="300px" height="300px" controls="controls" style="display: block;"></video>
        </form>
    </body> 
</html> 
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

温馨提示

关于 注册码 问题

      由于近期经常大量注册机器人注册发送大量广告,本站开启免费入群领取注册码注册网站账号,注册码在群公告上贴着...

关于 注册码 问题

      由于近期经常大量注册机器人注册发送大量广告,本站开启免费入群领取注册码注册网站账号,注册码在群公告上贴着...

Archiver|手机版|小黑屋|DLSite

GMT+8, 2024-10-30 08:27

Powered by Discuz! X3.5 and PHP8

快速回复 返回顶部 返回列表