成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何在Springboot項(xiàng)目利用video標(biāo)簽實(shí)現(xiàn)一個(gè)視頻播放功能-創(chuàng)新互聯(lián)

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

網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)建站!專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了大祥免費(fèi)建站歡迎大家使用!

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標(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)擊格式工廠

如何在Springboot項(xiàng)目利用video標(biāo)簽實(shí)現(xiàn)一個(gè)視頻播放功能

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

如何在Springboot項(xiàng)目利用video標(biāo)簽實(shí)現(xiàn)一個(gè)視頻播放功能

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

如何在Springboot項(xiàng)目利用video標(biāo)簽實(shí)現(xiàn)一個(gè)視頻播放功能

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

如何在Springboot項(xiàng)目利用video標(biāo)簽實(shí)現(xiàn)一個(gè)視頻播放功能

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

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

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

如何在Springboot項(xiàng)目利用video標(biāo)簽實(shí)現(xiàn)一個(gè)視頻播放功能

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

<?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.獲取到視頻存放路徑之后,跳轉(zhuǎn)到視頻播放頁面: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" >點(diǎn)此返回主頁</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 標(biāo)簽。
  </video>

 </div>
</div>

</body>

</html>

上述內(nèi)容就是如何在Springboot項(xiàng)目利用video標(biāo)簽實(shí)現(xiàn)一個(gè)視頻播放功能,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題:如何在Springboot項(xiàng)目利用video標(biāo)簽實(shí)現(xiàn)一個(gè)視頻播放功能-創(chuàng)新互聯(lián)
分享網(wǎng)址:http://jinyejixie.com/article42/dehdhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、做網(wǎng)站定制網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)App設(shè)計(jì)、外貿(mào)建站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)
临猗县| 贵港市| 沧州市| 南和县| 汝南县| 连平县| 淅川县| 海伦市| 井研县| 岑巩县| 高青县| 富锦市| 本溪市| 江达县| 睢宁县| 奇台县| 宜城市| 台北市| 新泰市| 定结县| 乌海市| 临清市| 石屏县| 大洼县| 禹州市| 钟山县| 蒙自县| 双城市| 缙云县| 长乐市| 南宁市| 武陟县| 老河口市| 广河县| 乳源| 故城县| 崇明县| 南丰县| 嵊泗县| 天祝| 拜城县|