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

素颜马尾好姑娘i 2024-02-19 16:07 35阅读 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][]

##  ##

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

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

需要的js文件：

ckplayer.js

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

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 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RHSDI0MzAyODQ4MTc_size_16_color_FFFFFF_t_70 3][]

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

3:编写视频页面ckPlayer.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>
    <script src="${pageContext.request.contextPath}/js/ckplayer.js"></script>
    <style>
    body {
    	background-color: white
    }
    
    .m {
    	width: 840px;
    	height: 500px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 100px;
    	background-color: red
    }
    </style>
    </head>
    <body>
    	Model:ckPlayer<br>
    	videoname: ${videoname}
    	<br>
    	
    	<div class="m">
    		<div id="video" style="width: 100%; height: 100%;"></div>
    		<script type="text/javascript">
    			var videoObject = {
    				container : '#video',//“#”代表容器的ID，“.”或“”代表容器的class
    				variable : 'player',//该属性必需设置，值等于下面的new chplayer()的对象
    				flashplayer : false,//如果强制使用flashplayer则设置成true
    				allowFullScreen : true,//是否支持全屏
    				video : {
    					file : '${pageContext.request.contextPath}/mp4/${videoname}.mp4',//视频地址
    					type : 'video/mp4'
    				}
    			};
    
    			var player = new ckplayer(videoObject);
    		</script>
    	</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/32f6ac437b7144ecb41979a5c8447514.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/1c2bf7b2127848168ceab1a18ec2ea14.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/f40bc92173d74d3da26ff9b0f704be20.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/3a8a26952b00488abb5abfde9c0ec70f.png