如何简单实现视频预览和图片预览

小灰灰 2023-07-25 06:14 73阅读 0赞

> 工作需要做一个视频预览和图片预览，于是就发现了一个简单省事的预览方法，供大家参考一下，请多指教啊

var videoExts = [".avi", ".mp4", ".wma", ".rmvb", ".rm", ".flash", ".3gp", ".flv", ".wmv"];
        var imgExts = [".bmp", ".jpeg", ".jpg", ".gif", ".png"];    
    $("#preview").click(function () {
            var file = $("#ResUrl").val();//获取我那件路径
            if (file == null || file == "") {
                layer.msg("请先选择文件");
                return;
            }
            var ext = file.substring(file.lastIndexOf('.')).toLowerCase();//获取文件后缀
    
            var html = "";
            var title = "";
            if (imgExts.indexOf(ext) > 0) {
                title = "图片预览";
                html = "<img src='" + file + "' style='width:100%;height:99%; ' />"//预览图片时
            }
            else if (videoExts.indexOf(ext) > 0)//预览视频时
            {
                title = "视频预览";
                var html = '<div class="wrap">';
                html += '<video style="width: 100 %; height: 99 %;"  crossorigin="anonymous" controls autobuffer>';
                html += "<source src='" + file + "'/>";
                html += '</video>';
                html += '</div>';
            }
            else
            {
                return;
            }
    
            layer.open({
                type: 1,//很关键的一点，layer弹框的type一定要为1
                area: ['80%', '90%'],
                skin: 'layui-layer-rim', //加上边框
                title: title,
                content: html,
                cancle: function () {
                    layer.closeAll();
                }
            });
    
        });

>  效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnNoaW5lQmxvZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnNoaW5lQmxvZw_size_16_color_FFFFFF_t_70]: /images/20230528/2d3faf546fdd448a8f7f501843f1c657.png

发表评论取消回复

表情：

评论列表（有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

相关如何简单实现视频预览和图片预览

> 工作需要做一个视频预览和图片预览，于是就发现了一个简单省事的预览方法，供大家参考一下，请多指教啊 var videoExts = [".avi", ".mp4",

小灰灰/ 2023年07月25日 06:14/ 0 赞/ 74 阅读

相关 vant 图片预览

使用vant/vue --ts图片预览实现效果 ![在这里插入图片描述][2021010615194537.gif_pic_center] vant ui

ゝ一纸荒年。/ 2023年01月03日 01:20/ 0 赞/ 550 阅读

相关图片在线预览的简单实现

在项目中有上传图片的需求，把图片上传到服务器上，然后把图片在服务器上的路径存储到数据库的路径字段中功能需求：图片在线预览思路：拿到图片的路径，得到该图片的输入流File

爱被打了一巴掌/ 2022年12月05日 12:13/ 0 赞/ 274 阅读

相关 vue word预览，excel预览，pdf预览

一、word预览–mammoth.js 安装：`npm install --save mammoth` tip：只能预览.docx文件 word.vue:

淩亂°似流年/ 2022年11月15日 11:13/ 0 赞/ 703 阅读

相关单图片预览

implementation 'cn.bingoogolapple:bga-photopicker:1.2.8@aar' implementation

一时失言乱红尘/ 2022年08月29日 15:55/ 0 赞/ 438 阅读

相关一个简单的图片预览

//图片预览 $("\prodimg").change(function () \{ var objUrl

迈不过友情╰/ 2022年07月13日 08:50/ 0 赞/ 179 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 511 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 729 阅读

相关 uniapp预览图片

一、需求最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。点击图片，可预览图片。就用到了 uniapp 预览图片的功能：u

以你之姓@/ 2021年09月03日 05:51/ 0 赞/ 1306 阅读

相关 uniapp 实现图片预览单图预览和多图预览

uniapp 实现图片预览单图预览和多图预览关键点就是调用 uni.previewImage({ current: index,

落日映苍穹つ/ 2021年09月02日 03:18/ 0 赞/ 2397 阅读