Springboot项目使用html5的video标签完成视频播放功能

您所在的位置：网站首页 › springboot视频播放接口 › Springboot项目使用html5的video标签完成视频播放功能

Springboot项目使用html5的video标签完成视频播放功能

2024-01-25 11:06| 来源: 网络整理| 查看: 265

Springboot项目使用html5的video标签完成视频播放功能 1.首先引入pom文件: pom.xml2.使用video标签来播放视频:3.视频播放功能的具体实现：文件的上传与下载会另外再写一篇博客，本篇博客只是记录视频播放功能的实现过程

1.首先引入pom文件: pom.xml 4.0.0 org.springframework.boot spring-boot-starter-parent 2.1.5.RELEASE com.wulaobo excellentcourse_springboot 0.0.1-SNAPSHOT excellentcourse_springboot Demo project for Spring Boot 1.8 com.github.pagehelper pagehelper-spring-boot-starter 1.2.5 org.springframework.boot spring-boot-starter-jdbc org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-web org.mybatis.spring.boot mybatis-spring-boot-starter 2.0.1 log4j log4j 1.2.17 mysql mysql-connector-java runtime org.springframework.boot spring-boot-starter-test test com.alibaba druid 1.1.12 org.springframework.boot spring-boot-maven-plugin com.wulaobo.ExcellentcourseSpringbootApplication 2.使用video标签来播放视频: video 元素支持三种视频格式： MP4, WebM, 和 Ogg: MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

我使用的是MP4格式的视频，video标签对MP4视频的编码格式有要求，所以使用格式工厂来对视频进行编码. 下载链接：点我下载

2.下载安装之后点击格式工厂 3. 点击 -> MP4 在这里插入图片描述 4. 点击输出配置，配置视频的编码格式

在这里插入图片描述

5.设置视频编码：注意：视频编码要设置为 AVC(H264) ，音视频编码要设置为 AAC 在这里插入图片描述 6. 然后点击确定 ->添加文件 ->确定 ->开始就可以了切记：上传视频时，一定要上传使用格式工厂转码后的视频，否则video标签不能播放视频

3.视频播放功能的具体实现：

1.点击播放按钮如下图所示：在这里插入图片描述 2.点击播放按钮进入VideoController获取文件的存放路径，代码如下所示：

package com.wulaobo.controller; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import com.wulaobo.bean.Video; import com.wulaobo.service.VideoService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.*; import java.net.URLEncoder; import java.sql.Timestamp; import java.text.DecimalFormat; import java.util.List; import java.util.Random; @Controller public class VideoController { @Autowired private VideoService videoService; //点击播放按钮，开始播放视频 @GetMapping(value = "/videoPlayByIdAndAdmin") public String videoPlayByIdAndAdmin(Integer id,ModelMap model) { Video video = videoService.getVideoById(id); model.addAttribute("title",video.getTitle()); model.addAttribute("path",video.getPath()); return "videoPlay"; } } controller层调用service层: VideoServiceImpl.java package com.wulaobo.service.impl; import com.wulaobo.bean.Video; import com.wulaobo.mapper.VideoMapper; import com.wulaobo.service.VideoService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class VideoServiceImpl implements VideoService { @Autowired private VideoMapper videoMapper; @Override public Video getVideoById(Integer id) { return videoMapper.getVideoById(id); } } service层调用dao层：VideoMapper.java package com.wulaobo.mapper; import com.wulaobo.bean.Video; import java.util.List; public interface VideoMapper { Video getVideoById(Integer id); } mybatis配置文件: select * from t_video where id=#{id} 获取到视频存放路径之后，跳转到视频播放页面：VideoPlay.html 在线视频播放点此返回主页

【本文地址】

Springboot项目使用html5的video标签完成视频播放功能

Springboot项目使用html5的video标签完成视频播放功能

今日新闻

推荐新闻