功能描述:

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

_____________________________________________________________________________________________________

_____________________________________________________________________________________________________

_____________________________________________________________________________________________________

需要的资源:

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

_____________________________________________________________________________________________________

_____________________________________________________________________________________________________

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;@Controllerpublic 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><!-- CkPlayer  --><div class="m"><div id="video" style="width: 100%; height: 100%;"></div><script type="text/javascript">var videoObject = {container : '#video',//“#”代表容器的ID,“.”或“”代表容器的classvariable : 'player',//该属性必需设置,值等于下面的new chplayer()的对象flashplayer : false,//如果强制使用flashplayer则设置成trueallowFullScreen : true,//是否支持全屏video : {file : '${pageContext.request.contextPath}/mp4/${videoname}.mp4',//视频地址type : 'video/mp4'}};var player = new ckplayer(videoObject);</script></div>
</body>
</body>
</html>

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

4:运行项目:

SSM+ckplayer.js实现web项目网页看视频相关推荐

  1. 苹果手机打电话没有声音怎么回事_网页看视频没有声音怎么回事?

    许多人看视频的时候都是在网页上直接观看,简单方便,只是有的用户遇到了网页看视频没有声音的情形,这是怎么回事?应该怎么解决呢? 先看看是不是关闭了网页的声音.像是360浏览器在右下角有个小喇叭,可以打开 ...

  2. EasyPlayer.js开发Web H5网页播放H.265视频播放支持FLV与HLS直播与点播的过程

    开发背景 在2019年之前,一直的理解就是H.265是无法在网页上进行解码播放的,直到我看到了金山云.阿里云的技术在LVS流媒体社区推送的关于wasm(WebAssembly)解码播放H.265视频的 ...

  3. Node.js开发WEB项目后端接口API,基于mysql5.7数据库(小试牛刀)

    项目结构 main.js(入口文件,开启9999端口监听,实现RESTful风格接口访问) const express = require("express"); const ap ...

  4. tomcat部署下的web项目网页更改不能自动刷新

    tomcat项目中网页上做了改动,然而浏览器刷新并没有卵用,很是烦,在网上也查找了很多答案,说需要个更改在server.xml里面的context标签中有一个reloadable="true ...

  5. js和css和img,Node.js压缩web项目中的js,css和图片

    安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功 安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是 ...

  6. Node.js压缩web项目中的js,css和图片

    2019独角兽企业重金招聘Python工程师标准>>> 安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功 安装压缩需要的模块分别 ...

  7. web项目里看不到html,在webpack中导入html文件时找不到模块错误

    尝试使用 html-loader插件在TypeScript中导入html: import buttonHtml from './button.html'; 出现TypeScript错误: TS2307 ...

  8. 网页全终端视频流媒体视频直播/点播播放器EasyPlayer.js实现WEB播放H265/HEVC视频方案介绍

    https://blog.csdn.net/TsingSee/article/details/104516857

  9. 网页看视频没有声音怎么办

    前言 今天博主在网页上看一段视频,可是发现没有声音,里面的人光张嘴不出声,怎么解决呢? 第一种(根据每个人的浏览器不同步骤有些差别) 我们可以点击浏览器"工具"下拉列表,从中选择& ...

最新文章

  1. C++ 笔记(11)— 循环(while/for/do while/嵌套循环、break/continue/goto 循环控制语句)
  2. python多线程同步与互斥_Python之多线程:线程互斥与线程同步
  3. Flex Builder 4.6 正式版eclipse插件利用BlazeDS于java交互实例
  4. MySQL中的外键约束
  5. LINK : fatal error LNK1104: cannot open file mfc42d.lib
  6. 什么是Spring Boot?
  7. webservice接口_webservice服务器端发票识别接口
  8. 增量式pid调节方式有何优点_增量式pid和位置式pid相比各有什么优缺点
  9. flutter图片预览_flutter - 图片预览放大滑动(photo_view)
  10. cmd fsutil 命令 - 创建指定大小文件命令
  11. html跨行使用的属性,HTML表格标记详解4:TD参数中设定跨列跨行属性
  12. ENVI实现归一化建筑物指数(NDBI)实验操作
  13. .so 依赖目录 cmake_Android Studio 生成 so 文件
  14. Flash cs4新增内容:三维效果
  15. cad批量打印_CAD批量打印PDF软件CAD转PDF自动选纸SmartBatchPlo
  16. 机器学习第九章聚类Kmeans练习(西瓜数据集4.0)
  17. WebRTC之视频采集
  18. dtm文件生成等高线 lisp_CAD2000下DTM的建立
  19. 常用的卫星影像数据查询网址【值得收藏】
  20. MySQL——数据库

热门文章

  1. 产品生命周期专业术语积累
  2. java 安全警告 关闭_关闭安全警告的两种方法
  3. matlab tolfun,非线性方程组求解问题(关于TolFun设置问题)
  4. 【图像重建】基于遗传算法实现二值图像重建附matlab代码
  5. 南华大学计算机考研资料汇总
  6. 网页制作练习-博文尚美页面
  7. 证明spring中property name=这个双引号的内容只与setter方法有关,与一个类定义的字段和getter方法无关...
  8. 组合计数------牡牛和牝牛
  9. matlab语音识别系统(源代码),matlab语音识别系统(源代码)最新版DOC.doc
  10. 打通版4.3 思维导图