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

最新推荐文章于 2024-05-05 16:00:00 发布

小白的码BUG之路

最新推荐文章于 2024-05-05 16:00:00 发布

阅读量5.1k

点赞数

本文链接：https://blog.csdn.net/DGH2430284817/article/details/86293355

版权

功能描述：

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

_____________________________________________________________________________________________________

需要的资源：

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资源文件。

_____________________________________________________________________________________________________

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

_____________________________________________________________________________________________________

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>

<!-- main begin-->

    <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控件，播放视频 -->

<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:运行项目：

小白的码BUG之路

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
SSM+Video.js实现web项目网页看视频

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

扫一扫