小型直播系统系列-乐聊TV的开发（三）-CSDN博客

本文链接：https://blog.csdn.net/qq_18885315/article/details/77989572

本文是小型直播系统系列的第三部分，主要介绍了如何使用Spring-Boot和JPA搭建项目结构，以及前端如何通过vue-video-player + videojs-contrib-hls播放m3u8视频。文章详细讲解了OBS推流软件的设置步骤，并探讨了选择vue-video-player的原因和解决视频跨域问题的方法。

摘要由CSDN通过智能技术生成

小型直播系统系列-乐聊TV的开发（三）

上一节我们讲到系统概括，这一节我们详细讲解一下spring-boot jpa的使用：

spring-boot的使用

如今，随着微服务框架的发展，出现了诸如dubbo的开源微服务框架，springcloud相比更容易上手，spring-boot作为微服务的入门框架，有着十分重要的地位。

package com.dingjianlei.springboot;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.scheduling.annotation.EnableScheduling;
/**
 * 
 * @author dingjianlei
 *
 */
@SpringBootApplication
@EnableScheduling
public class LeChatTvApplication {
    public static void main(String[] args) {
        SpringApplication.run(LeChatTvApplication.class, args);
    }
}

如上图，就已经生成了一个spring-boot的应用，它自带容器运行，便捷开发，开箱操作，省去了spring的大把配置文件，让你编码走路带风，用它编码就感觉走路轻飘飘，再也不用理会烦人的xml配置了
本项目的spirng-boot结构如下
这里写图片描述

项目分为6大模块

1

根模块下面放着启动项目的入口程序，装配bean
2
3

config模块放着启动项目时各种监听器，配置装载，
4
常用常量
5
常用controller模块
6
爬虫模块

项目静态配置文件

这里写图片描述

采用spring-data-jpa 框架，自动建表，dao声明接口自动帮我们生成方法。

前端播放m3u8视频

当我们成功安装好了rtmp模块之后，就可以用作为直播服务器，那么直播的来源哪里来呢？这里用到一个推流播放器 obs。

obs的使用

http://soft.qazwaxs.com/OBS到这里现在下载obs，然后进行设置，步骤如下图

步骤一：

这里写图片描述

——————————

步骤二

这里写图片描述

步骤三

现在你已经成功的推流成功，cd到你设置的目录下面，就可以看到后缀是.m3u8的视频了,下面开始拉流，介绍的是前端拉流用到的框架结构 vue-video-player + videojs-contrib-hls。如果你迫不及待，现在就可以用页面进行观看一波

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8">  
    <title>HLS Player</title>  
</head>  
<body>  
<video poster="poster.png" height="720" width="1280" controls>  
    <source src="http://192.168.90.26:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" />  
    <p class="warning">Your browser does not support HTML5 video.</p>  
</video>  
</body>  
</html>

但是很遗憾，只有苹果手机的Safari浏览器支持，安卓手机的没测试。

vue-video-player + videojs-contrib-hls

前端拉流采用的是 vue-video-player + videojs-contrib-hls，github地址是https://github.com/videojs/videojs-contrib-hls，video.js是一个开源的视频播放器，开始我使用的是一个cdplayer，同样支持m3u8的播放，这里可能有人有疑问，为什么不用h5直接播放呢？
因为苹果手机天生支持m3u8格式的播放，但是pc很遗憾并不支持，所以需要我们自己编写播放规则
可以百度一下 vue-video-player + videojs-contrib-hls的使用
很重要的一点，需要解决视频跨域问题。也就是视频播放路径和我们的项目在同一域名端口下。