Android 仿抖音视频播放效果 仿抖音软件

目录

发布短视频的流程梳理

传统上传流程 

传统上传

CDN上传

CDN上传流程

使用Unicloud云端功能

 实现app端视频上传

保存视频信息入库

---

发布短视频的流程梳理

传统上传流程 

注：controller接受到文件之后会把文件上传到服务器，同时controller获得某一帧帧来获得我们的封面图，上传到我们的文件服。视频和封面的地址保存到我们的数据库。

传统上传

 这里是两个节点，整个链路带宽资源占了2G，会有2G带宽的损耗。用户产生的风险也很大。

CDN上传

云厂商提供：

CDN，静态资源服务，全球都能访问。 

传统方式：前端上传文件到cdn之后，我们可以拿到cdn中的播放地址，随后我们会把视频文件再次传到controller。

现在：只需要拿到视频文件的url地址，一些基本的视频信息放到我们的controller中存储就可以了。这里我们只有一次文件的上传，产生的带宽损耗发生在云厂商，风险的承担也由他们承担。

补：cdn带有截帧的功能

优化：减少一次带宽，优化传输速率，提升用户体验。

CDN上传流程

 我们会拿到两个url，文本信息提交到controller做处理。

使用Unicloud云端功能

 unicloud可以在云端编写云函数，云函数作为接口为前端服务，这里不需要我们操作。

云端也提供了云数据库服务。

 打开官方控制台：
创建服务空间：

 打开HBuilder：

 关联云空间： 

 集成成功之后的unicloud

 

 实现app端视频上传

发送在前端的：

 打开前端：

监听函数，代表中间的+按钮，可以让APP.Vue监听，就可以有相应方法的执行：

 这里的e是一个文件事件对象，

 跳转到publish页面：

 进度条： 

上传成功之后，我们会得到一个文件对象（f）：

 这里阿里云会提供一个截帧服务。

最后重启，打开主页，点击+上传：

 这里的封面图是截帧截取的

 

 点击预览视频：

 返回网页看我们的云存储：

 这个就是我们刚刚上传的地址。

这就完成了我们CDN的视频上传。

保存视频信息入库

在前端找到发布视频的路由：

 在model中：

 构建service：

接口：

 接口实现：
 

@Service
public class VlogServiceImpl implements VlogService {

    @Resource
    private VlogMapper vlogMapper;



    @Autowired
    private Sid sid;
    private static final String USER_FACE1 = "http://122.152.205.72:88/group1/M00/00/05/CpoxxF6ZUySASMbOAABBAXhjY0Y649.png";


    @Transactional
    @Override
    public void createdVlog(VlogBO vlogBO) {
        String vid = sid.nextShort();
        Vlog vlog = new Vlog();
        BeanUtils.copyProperties(vlogBO,vlog);
        vlog.setId(vid);
        vlog.setCommentsCounts(0);
        vlog.setIsPrivate(YesOrNo.NO.type);
        vlog.setCreatedTime(new Date());
        vlog.setUpdatedTime(new Date());
        vlogMapper.insert(vlog);
    }
}

 在controller层：

 Meavn中install，重启运行。

 点击发布，页面消失，发布成功，打开数据库：

 

把视频的url地址在unicloud中搜索，检查是否匹配。