如何在Springboot项目利用video标签实现一个视频播放功能-创新互联-成都快上网建站

如何在Springboot项目利用video标签实现一个视频播放功能-创新互联

本篇文章为大家展示了如何在Springboot项目利用video标签实现一个视频播放功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了大祥免费建站欢迎大家使用!

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.下载安装之后点击格式工厂

如何在Springboot项目利用video标签实现一个视频播放功能

3. 点击 -> MP4

如何在Springboot项目利用video标签实现一个视频播放功能

4. 点击输出配置,配置视频的编码格式

如何在Springboot项目利用video标签实现一个视频播放功能

5.设置视频编码:
注意:视频编码要设置为 AVC(H264) ,音视频编码要设置为 AAC

如何在Springboot项目利用video标签实现一个视频播放功能

6. 然后点击确定 ->添加文件 ->确定 ->开始就可以了
切记:上传视频时,一定要上传使用格式工厂转码后的视频,否则video标签不能播放视频

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

1.点击播放按钮如下图所示:

如何在Springboot项目利用video标签实现一个视频播放功能

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";
 }
}

3.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);
 }
 
}

4.service层调用dao层:VideoMapper.java

package com.wulaobo.mapper;

import com.wulaobo.bean.Video;
import java.util.List;

public interface VideoMapper {

  Video getVideoById(Integer id);
  
}

5.mybatis配置文件:





	
    select * from t_video where id=#{id}
  

6.获取到视频存放路径之后,跳转到视频播放页面:VideoPlay.html




 在线视频播放
 
 
 
 




 
 点此返回主页
    

          您的浏览器不支持 HTML5 video 标签。     

上述内容就是如何在Springboot项目利用video标签实现一个视频播放功能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


当前名称:如何在Springboot项目利用video标签实现一个视频播放功能-创新互联
文章转载:http://kswjz.com/article/dehdhc.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯