SSM+Video.js实现web项目网页看视频

逃离我推掉我的手 2024-02-19 15:42 17阅读 0赞

## **功能描述：** ##

用户在首页http://localhost:8080/SSM\_HTTPS/，输入视频名，点击“走 你”按钮，跳转到视频页面，搜索符合你视频名的视频（本项目中只有两个视频，test和test2，没有加任何控制逻辑，后期若想增加操作课自行添加）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RHSDI0MzAyODQ4MTc_size_16_color_FFFFFF_t_70][]

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RHSDI0MzAyODQ4MTc_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RHSDI0MzAyODQ4MTc_size_16_color_FFFFFF_t_70 2][]

##  ##

## **需要的资源：** ##

SSM框架需要的jar包；(不提供)

Video.js需要的js，css文件：

video.min.js ，videojs-ie8.min.js ，video-js.css

## **项目环境：** ##

JDK: 1.6

TOMCAT: 7.0

## **步骤：** ##

1:搭建ssm框架：（自己随便百度，本项目简单，不适用数据库，只用到了控制器，业务逻辑注入部分已经注释，所以可以在任何电脑运行，不用修改，不会连接数据库，后面需要添加数据库时自己添加控制器的注入，XML配置已经配好了的，数据库连接自己在config里的db.properties修改Mysql连接）

src：

项目的java文件（本项目只用到了控制器）

config：

项目的配置文件，不用修改。

css：

项目需要的css文件。

js：

项目需要的Js文件。

mp4：

项目的MP4资源文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RHSDI0MzAyODQ4MTc_size_16_color_FFFFFF_t_70 3][]

2:编写欢迎页面index.jsp，在web.xml添加为欢迎界面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RHSDI0MzAyODQ4MTc_size_16_color_FFFFFF_t_70 4][]

Index.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
      <head>
    
        <title>视频搜索</title>
    
      </head>
    
    <body>
    
    
    
        <div> <p><img src="${pageContext.request.contextPath}/images/img1.jpg" width="443" height="314" alt="" /></p>
    
       </div>
    
         <form action="login.action" method="post">
    
        <div class="login">
    
          <dl>
    
            <dt class="blues">视频搜索</dt>
    
            <dd><label for="name">视频名：</label>
    
             <input type="text" name="videoname" class="inputh" value="${videoname}" id="name"/>
    
            </dd>
    
            <dd class="buttom">
    
               <input name="" type="submit" value="走 你" class="spbg buttombg f14 lf" />
    
               <div class="cl"></div>
    
            </dd>
    
          </dl>
    
        </div>
    
        </form>
    
    </body>
    
    </html>

3:编写控制器UserController.java

package com.qut.controller;
    
    import org.springframework.stereotype.Controller;
    
    import org.springframework.ui.Model;
    
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import com.qut.pojo.VedioMsg;
    
    
    
    @Controller
    
    public class UserController {
    
    
    
    //我就不注入了，没用到数据库
    
        //@Autowired
    
       // private UserService userService;
    
    
    
        @RequestMapping("/login")
    
        public String login(VedioMsg video , Model model){
    
         System.out.println("进入login："+model);
    
            model.addAttribute("videoname",video.getVideoname());
    
            System.out.println("videoname:"+video.getVideoname());
    
            return "login2";
    
        }
    
    
    
    }

3:编写视频页面login2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>  
    
    <!doctype html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Video.js 6.2.8</title>
    
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/video-js.css"> 
    
    <script src="${pageContext.request.contextPath}/js/video.min.js"></script> 
    
    <script src="${pageContext.request.contextPath}/js/videojs-ie8.min.js"></script> 
    
    <style>
    
    body{background-color: white}
    
    .m{ width: 840px; height: 500px; margin-left: auto; margin-right: auto; margin-top: 100px; }
    
    </style>
    
    </head>
    
    <body>
    
     videoname: ${videoname} <br>
    
    <div class="m">
    
    
    
    <video id="my-video" class="video-js" controls preload="auto" width="740" height="400">
    
    <source src="mp4/${videoname}.mp4" type="video/mp4"></source>
    
    <source src="movie.ogg" type="video/ogg"></source>
    
      </video>
    
    </div>
    
    </body>
    
    </body>
    
    </html>

——————————————————————————————————

4:运行项目：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RHSDI0MzAyODQ4MTc_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6b91e14da8f94633a7bea9453b74335a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RHSDI0MzAyODQ4MTc_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f7f4a6d6df93473fa2fbe1cb71c9baaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RHSDI0MzAyODQ4MTc_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7d5dc56d59d246e2a01a2de036959b31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RHSDI0MzAyODQ4MTc_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1921901bffda4a4bac15b82cf59d51c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RHSDI0MzAyODQ4MTc_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a6eadee6f29849bb9abdaf45522f1f21.png