SSM+mediaplayer实现web项目网页看视频

你的名字 2024-02-19 16:07 27阅读 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，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 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 "mediaplayer";
    
        }
    
    
    
    }

3:编写视频页面mediaplayer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>mediaplayer</title>
    <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:mediaplayer<br>
    	videoname: ${videoname}
    	<br>
    	
      <div class="m">
      <object id="MediaPlayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="100%" height="100%" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
        <param name="FileName" value="${pageContext.request.contextPath}/mp4/${videoname}.mp4">
        <param name="AutoStart" value="true">
        <param name="ShowControls" value="true">
        <param name="BufferingTime" value="2">
        <param name="ShowStatusBar" value="true">
        <param name="AutoSize" value="true">
        <param name="InvokeURLs" value="false">
        <param name="AnimationatStart" value="1">
        <param name="TransparentatStart" value="1">
        <param name="Loop" value="1">
        <param name="container" value="#video">
        <embed type="application/x-mplayer2" src="${pageContext.request.contextPath}/mp4/${videoname}.mp4" name="MediaPlayer" autostart="1" showstatusbar="1" showdisplay="1" showcontrols="1" loop="0" videoborder3d="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="800" height="600"></embed>
     </object>
     </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/5fb7665f9ea644ffb96d6dea5f7df208.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/af7717c239654461a85830a85b86795a.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/84d32ccea5f0426f8198fd704e00b449.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/a424dfa1205c4b708f6fcc08f615457c.png