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

 更新时间:2020年12月18日 16:20:49   作者:武老伯爱听戏  
这篇文章主要介绍了Springboot项目使用html5的video标签完成视频播放功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

文件的上传与下载会另外再写一篇博客,本篇博客只是记录视频播放功能的实现过程

1.首先引入pom文件: pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>2.1.5.RELEASE</version>
  <relativePath/> <!-- lookup parent from repository -->
 </parent>
 <groupId>com.wulaobo</groupId>
 <artifactId>excellentcourse_springboot</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <name>excellentcourse_springboot</name>
 <description>Demo project for Spring Boot</description>

 <properties>
  <java.version>1.8</java.version>
 </properties>

 <dependencies>

  <!-- pagehelper -->
  <dependency>
   <groupId>com.github.pagehelper</groupId>
   <artifactId>pagehelper-spring-boot-starter</artifactId>
   <version>1.2.5</version>
  </dependency>

  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-jdbc</artifactId>
  </dependency>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
  <dependency>
   <groupId>org.mybatis.spring.boot</groupId>
   <artifactId>mybatis-spring-boot-starter</artifactId>
   <version>2.0.1</version>
  </dependency>

  <dependency>
   <groupId>log4j</groupId>
   <artifactId>log4j</artifactId>
   <version>1.2.17</version>
  </dependency>

  <dependency>
   <groupId>mysql</groupId>
   <artifactId>mysql-connector-java</artifactId>
   <scope>runtime</scope>
  </dependency>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-test</artifactId>
   <scope>test</scope>
  </dependency>
  <dependency>
   <groupId>com.alibaba</groupId>
   <artifactId>druid</artifactId>
   <version>1.1.12</version>
  </dependency>
 </dependencies>

 <build>
  <plugins>
   <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <configuration>
     <mainClass>com.wulaobo.ExcellentcourseSpringbootApplication</mainClass>
    </configuration>
   </plugin>
  </plugins>
 </build>

</project>

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

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配置文件:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wulaobo.mapper.VideoMapper">

	<select id="getVideoById" parameterType="Integer" resultType="video">
    select * from t_video where id=#{id}
  </select>

</mapper>

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

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <title>在线视频播放</title>
 <link rel="shortcut icon" th:href="@{/favicon.ico}" rel="external nofollow" />
 <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="external nofollow" >
 <script th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
 <script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>
<!--<div th:replace="header::header1"></div><br/><br/><br/>-->
<div class="text-right ">
 <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
 <a th:href="@{getAllNews}" rel="external nofollow" >点此返回主页</a>
</div>
<div class="panel panel-default">
 <div class="panel-body" align="center">
  <div id="a1" align="center" th:text="${title}"></div><br/>
  <video width="600" height="400" align="center" controls>
   <source th:src="@{'/upload/'+${path}}" type="video/mp4">

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

 </div>
</div>

</body>

</html>

7.然后视频就开始播放啦。。。

在这里插入图片描述

项目完整代码已托管到github平台上:链接: 点我看项目源码.

到此这篇关于Springboot项目使用html5的video标签完成视频播放功能的文章就介绍到这了,更多相关Springboot视频播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • RabbitMQ 最常用的三大模式实例解析

    RabbitMQ 最常用的三大模式实例解析

    这篇文章主要介绍了RabbitMQ 最常用的三大模式实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • SpringBoot使用Jsp的示例代码

    SpringBoot使用Jsp的示例代码

    这篇文章主要介绍了SpringBoot使用Jsp的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • spring security国际化及UserCache的配置和使用

    spring security国际化及UserCache的配置和使用

    这篇文章主要介绍下国际化的配置及UserCache的配置及使用教程,感兴趣的朋友参考下实现代码吧
    2017-09-09
  • 学习Java之IO流的基础概念详解

    学习Java之IO流的基础概念详解

    这篇文章主要给大家介绍了Java中的IO流,我们首先要搞清楚一件事,就是为什么需要IO流这个东西,但在正式学习IO流的使用之前,小编有必要带大家先了解一下IO流的基本概念,需要的朋友可以参考下
    2023-09-09
  • Java基于LoadingCache实现本地缓存的示例代码

    Java基于LoadingCache实现本地缓存的示例代码

    本文主要介绍了Java基于LoadingCache实现本地缓存的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 在SpringBoot项目中如何实现线程池的动态监控

    在SpringBoot项目中如何实现线程池的动态监控

    Spring Boot因其简便、高效的特点广受开发者喜爱,在复杂的业务场景下,如何确保Spring Boot应用的高性能和稳定性成为了一个关键问题,其中,线程池的管理策略直接影响到系统的吞吐量和资源利用效率,本文将重点探讨在Spring Boot项目中,如何实现线程池的动态监控
    2023-10-10
  • Java调用Pytorch实现以图搜图功能

    Java调用Pytorch实现以图搜图功能

    这篇文章主要为大家详细介绍了Java如何调用Pytorch实现以图搜图功能,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-06-06
  • Java代码注释规范详解

    Java代码注释规范详解

    代码附有注释对程序开发者来说非常重要,随着技术的发展,在项目开发过程中,必须要求程序员写好代码注释,这样有利于代码后续的编写和使用。下面给大家分享java代码注释的规范,需要的朋友参考下
    2016-02-02
  • 浅谈java实现重载的方法

    浅谈java实现重载的方法

    方法重载是让类以统一的方式处理不同类型数据的一种手段。多个同名函数同时存在,具有不同的参数个数/类型。重载Overloading是一个类中多态性的一种表现。Java的方法重载,就是在类中可以创建多个方法,它们具有相同的名字,但具有不同的参数和不同的定义。
    2015-09-09
  • java向下转型基础知识点及实例

    java向下转型基础知识点及实例

    在本篇文章里小编给大家整理的是一篇关于java向下转型基础知识点及实例内容,有兴趣的朋友们可以学习下。
    2021-05-05

最新评论