本篇文章為大家展示了如何在Springboot項(xiàng)目利用video標(biāo)簽實(shí)現(xiàn)一個(gè)視頻播放功能，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

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標(biāo)簽來播放視頻:

video 元素支持三種視頻格式： MP4, WebM, 和 Ogg:
MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

我使用的是MP4格式的視頻，video標(biāo)簽對(duì)MP4視頻的編碼格式有要求，所以使用格式工廠 來對(duì)視頻進(jìn)行編碼.
下載鏈接：點(diǎn)我下載

2.下載安裝之后點(diǎn)擊格式工廠

3. 點(diǎn)擊 -> MP4

4. 點(diǎn)擊輸出配置，配置視頻的編碼格式

5.設(shè)置視頻編碼：
注意：視頻編碼要設(shè)置為 AVC(H264) ，音視頻編碼要設(shè)置為 AAC

6. 然后點(diǎn)擊確定 ->添加文件 ->確定 ->開始就可以了
切記：上傳視頻時(shí)，一定要上傳使用格式工廠轉(zhuǎn)碼后的視頻，否則video標(biāo)簽不能播放視頻

3.視頻播放功能的具體實(shí)現(xiàn)：

1.點(diǎn)擊播放按鈕如下圖所示：

2.點(diǎn)擊播放按鈕進(jìn)入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;
 
 //點(diǎn)擊播放按鈕，開始播放視頻
 @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層調(diào)用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層調(diào)用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.獲取到視頻存放路徑之后，跳轉(zhuǎn)到視頻播放頁面：VideoPlay.html

 
 
 
 
 




 
 點(diǎn)此返回主頁