html5 voide视频播放结束,Springboot项目使用html5的video标签完成视频播放功能代码示例...

本篇文章小编给大家分享一下Springboot项目使用html5的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视频的编码格式有要求，所以使用格式工厂来对视频进行编码.

下载安装之后点击格式工厂

点击 -> MP4

点击输出配置，配置视频的编码格式

设置视频编码：

注意：视频编码要设置为 AVC(p64) ，音视频编码要设置为 AAC

然后点击确定 ->添加文件 ->确定 ->开始就可以了

切记：上传视频时，一定要上传使用格式工厂转码后的视频，否则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配置文件:

select * from t_video where id=#{id}

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

在线视频播放

点此返回主页

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

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