如何简单实现视频预览和图片预览-蒲公英云

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

小灰灰 2023-07-25 06:14 223阅读 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();
            }
        });
    });