1

最新推荐文章于 2024-08-03 22:03:24 发布

荼渔

最新推荐文章于 2024-08-03 22:03:24 发布

阅读量123

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_38534144/article/details/81843046

本文介绍了在微信小程序中遇到的video组件层级过高的问题及解决方案。通过使用图片替代视频并在新页面播放，解决了swiper组件中视频遮挡其他内容的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信video层级过高

在制作微信小程序时，其中一个功能时实现类似抖音的视频轮播，当时使用了swiper组件，在微信编译器上调试时看上去还可以，等到在真机上预览时，瞬间心态爆炸。。

在滑动页面时，视频一直浮动在上方，把其他内容都给覆盖了，这是一个超级无敌大bug,瞬间感觉这几天都白干了，冷静下来后连忙在社区和百度上找答案，结果发现这是由于video层级过高造成的，使用该组件时，我也没有注意到文档下面的字，而且目前也没有办法在层级方向上解决问题。

video o.png)

在这里吐槽一下，不知道为什么微信会把video的层级设置得那么高，连textarea也是这样，不知道意义何在。对于刚接触微信小程序得我来说，实在是太坑了。

怎么办？不使用swiper组件，有些效果无法实现，百度无数后，决定使用一个方法：

在视频位置使用图片代替，在点击视频后，跳转到另一个页面进行视频播放，其实也可以选择点击时隐藏图片，进行视频播放，但是在另一个页面播放简单一些，同时因为这里有评论的功能，所以我选择了第一种。

另一个问题出现了，我总不能随便使用一张图片来展示，这样显得千篇一律，肯定是不行的。

这里我使用FFmpeg,在后台将视频的某一帧进行截取，并保存到服务器上，然后把相应的图片地址返回到微信小程序，使用image进行展示。以下是截取视频帧的代码：

FFmpegFrameGrabber ff = new FFmpegFrameGrabber(path);
        try {
            ff.start();
        } catch (Exception e) {
            e.printStackTrace();
        }
        int lenght = ff.getLengthInFrames();
        int i = 0;
        Frame f = null;
        while (i < lenght) {
            // 过滤前100帧
            try {
                f = ff.grabFrame();
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            if ((i > 50) && (f.image != null)) {
                break;
            }
            i++;
        }
        IplImage img = f.image;
        int owidth = img.width();
        int oheight = img.height();
        // 对截取的帧进行等比例缩放
        int width = 270;
        int height = (int) (((double) width / owidth) * oheight);
        BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);
        bi.getGraphics().drawImage(f.image.getBufferedImage().getScaledInstance(width, height, Image.SCALE_SMOOTH), 0,
                0, null);
        try {
            ImageIO.write(bi, "jpg", targetFile);
            ff.stop();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }