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

最新推荐文章于 2024-06-24 23:32:45 发布

原创

最新推荐文章于 2024-06-24 23:32:45 发布 · 3.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #html5

本文介绍了在工作中如何使用JavaScript和HTML5轻松实现视频和图片的预览功能，提供了一种简单省事的方法，适合需要进行预览功能开发的场景。

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

    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="