视频上传用到了tomcat和MySQL，视频播放用到了ckplayer。还有一些相关的js文件。
upload.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<c:set var="cxtPath" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
<title>影片上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="在线视频网站" />
<link href="${cxtPath}/css/indexMovie.css" rel='stylesheet'
type='text/css' />
<link href="${cxtPath}/css/bootstrap.css" rel='stylesheet'
type='text/css' />
<link href="${cxtPath}/css/style.css" rel="stylesheet" type="text/css"
media="all" />
<script type="text/javascript" src="${cxtPath}/js/jquery-1.11.1.min.js"></script>
<script src="${cxtPath}/js/responsiveslides.min.js"></script>
<script type="text/javascript" src="${cxtPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${cxtPath}/js/plupload.full.min.js"></script>
<script type="text/javascript" src="${cxtPath}/js/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="${cxtPath}/js/zh_CN.js"></script>
<link href="${cxtPath}/css/jquery.plupload.queue.css" rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div class="container_wrap">
<!--顶部-->
<div class="header_top">
<div class="col-sm-3 logo" style="margin-top: -2%">
<a href="${cxtPath}/index.jsp"><img src="${cxtPath}/images/logo.png" alt="logo" /></a>
</div>
<div class="col-sm-5 nav" style="margin-top: -0.5%">
<ul>
<li><span class="simptip-position-bottom simptip-movable"
data-tooltip="电影"><a href="${cxtPath}/getMovieByCategory?category=1">
</a></span></li>
<li><span class="simptip-position-bottom simptip-movable"
data-tooltip="烈士纪念物品销售网"><a
href="${cxtPath}/getMovieByCategory?category=2"> </a> </span></li>
<li><span class="simptip-position-bottom simptip-movable"
data-tooltip="动漫"><a href="${cxtPath}/getMovieByCategory?category=3">
</a></span></li>
<li><span class="simptip-position-bottom simptip-movable"
data-tooltip="烈士3d图片展览馆"><a
href="${cxtPath}/getMovieByCategory?category=4"> </a></span></li>
</ul>
</div>
<div class="col-sm-4 header_right">
<ul class="header_right_box">
<li>
<p>
<c:if test="${user!=null}">
<a href="${cxtPath}/jsp/user/personalCenter.jsp">
<img src="${cxtPath}/${user.userPriceUrl}" alt="头像" style="border-radius:50%;" width=32px height=32px/>
<font color="#31B0D5" size="4">${user.userName}</font></a>
|
<a href="${cxtPath}/userLogout">
<font color="#31B0D5" size="4">退出</font></a>
</c:if></p>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="content" style="margin-top: -5%">
<div class="content">
<div class="register">
<h3 align="center">
<font color="#FFFFFF" size="7">上传影片</font>
</h3>
<div id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
<form method="post" action="${cxtPath}/updateMovie"
enctype="multipart/form-data">
<div class="register-top-grid">
<input type="hidden" name="userId" value="${user.id}"/>
<div>
<span><font color="#FFFFFF" size="4">缩略图</font><label></label></span>
<input type="file" name="moviePicture" />
</div>
<div>
<span><font color="#FFFFFF" size="4">名称</font><label></label></span>
<input type="text" name="movieName" placeholder="请输入影片名称">
</div>
<div>
<span><font color="#FFFFFF" size="4">国家/地区</font><label></label></span>
<input type="text" name="movieCountry" placeholder="请输入国家/地区">
</div>
<div>
<span><font color="#FFFFFF" size="4">时长</font><label></label></span>
<input type="text" name="option" placeholder="请输入影片时长">
</div>
<div>
<span><font color="#FFFFFF" size="4">类型</font><label></label></span>
<select class="select" name="categoryId">
<option selected="selected">请选择类型</option>
<c:forEach items="${categories}" var="categorie">
<option value="${categorie.id}">${categorie.categoryName}</option>
</c:forEach>
</select>
</div>
<div>
<span><font color="#FFFFFF" size="4">导演</font><label></label></span>
<input type="text" name="director" placeholder="请输入导演">
</div>
<div class="clearfix"></div>
<div>
<span><font color="#FFFFFF" size="4">主演</font><label></label></span>
<input type="text" name="actors" placeholder="请输入主演">
</div>
<div>
<span><font color="#FFFFFF" size="4">上映/首播日期</font><label></label></span>
<input type="text" name="showTime" placeholder="请输入影片上映/首播日期">
</div>
<div>
<span><font color="#FFFFFF" size="4">描述/简介</font><label></label></span>
<input type="text" name="message" placeholder="请输入影片描述/简介">
</div>
<div>
<span><font color="#FFFFFF" size="4">推荐指数/评分</font><label></label></span>
<select class="select" name="grade">
<option selected="selected">请给影片评分</option>
<option value="1">1.0分</option>
<option value="2">2.0分</option>
<option value="3">3.0分</option>
<option value="4">4.0分</option>
<option value="5">5.0分</option>
</select>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="register-but" align="center">
<input type="submit" value="提交"> <input
type="reset" value="重置">
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--页脚-->
<div class="container">
<footer id="footer">
<div id="footer-3d">
<div class="gp-container">
<span class="first-widget-bend"></span>
</div>
</div>
<div id="footer-widgets" class="gp-footer-larger-first-col">
<div class="gp-container">
<div class="footer_box">
<div class="clearfix"> </div>
</div>
<!--版权声明-->
<div class="copy" align="center">
<p>Copyright © 2020-2024.yx.</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</footer>
</div>
<script type="text/javascript">
$(function() {
// Initialize the widget when the DOM is ready
var uploader = $("#uploader").pluploadQueue({
// General settings
runtimes : 'html5,flash,silverlight,html4,jsp',
url : "pluploadUpload",
// Maximum file size
max_file_size : '10000mb',
chunk_size : '1mb',
// Resize images on clientside if we can
resize : {
width : 200,
height : 200,
quality : 90,
crop : true
// crop to exact dimensions
},
// Specify what files to browse for
filters : [ {
title : "Image files",
extensions : "jpg,gif,png"
}, {
title : "Vedio files",
extensions : "mp4,mkv,qsv"
}, {
title : "Zip files",
extensions : "zip,avi"
} ],
// Rename files by clicking on their titles
rename : true,
// Sort files
sortable : true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop : true,
// Views to activate
views : {
list : true,
thumbs : true, // Show thumbs
active : 'thumbs'
},
// Flash settings
flash_swf_url : 'js/Moxie.swf',
// Silverlight settings
silverlight_xap_url : 'js/Moxie.xap'
});
$("#toStop").on('click', function() {
uploader.stop();
});
$("#toStart").on('click', function() {
uploader.start();
});
});
</script>
</body>
</html>
player.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="moviePath"
value="http://localhost:9090/JNlswz/getMovie?url=F:/myvod/video/">
</c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<c:set var="cxtPath" value="${pageContext.request.contextPath}"></c:set>
<c:set var="url" value="pictureUrl?url=F:/myvod/images/yx/"></c:set>
<c:set var="url_user" value="pictureUrl?url=F:/myvod/images/"></c:set>
<html>
<head>
<title>播放器</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="在线视频网站" />
<script src="ckplayer/ckplayer.js" type="text/javascript" charset="utf-8"></script>
<script type="application/x-javascript">
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<link href="${cxtPath}/css/indexMovie.css" rel='stylesheet' type='text/css' />
<link href="${cxtPath}/css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="${cxtPath}/css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- start plugins -->
<script type="text/javascript" src="${cxtPath}/js/jquery-1.11.1.min.js"></script>
<script src="${cxtPath}/js/responsiveslides.min.js"></script>
</head>
<body>
<div class="container">
<div class="container_wrap">
<!--顶部-->
<div class="header_top">
<div class="col-sm-3 logo" style="margin-top: -2%">
<a href="index.jsp"><img src="${cxtPath}/images/logo.png" alt="logo" /></a>
</div>
<div class="col-sm-5 nav" style="margin-top: -0.5%">
<ul>
<li><span class="simptip-position-bottom simptip-movable"
data-tooltip="电影"><a href="${cxtPath}/getMovieByCategory?category=1">
</a></span></li>
<li><span class="simptip-position-bottom simptip-movable"
data-tooltip="电视剧"><a
href="${cxtPath}/getMovieByCategory?category=2"> </a> </span></li>
<li><span class="simptip-position-bottom simptip-movable"
data-tooltip="动漫"><a href="${cxtPath}/getMovieByCategory?category=3">
</a></span></li>
<li><span class="simptip-position-bottom simptip-movable"
data-tooltip="综艺"><a
href="${cxtPath}/getMovieByCategory?category=4"> </a></span></li>
</ul>
</div>
<div class="col-sm-4 header_right">
<ul class="header_right_box">
<li>
<p>
<c:if test="${user!=null}">
<a href="${cxtPath}/jsp/user/personalCenter.jsp">
<img src="${cxtPath}/${user.userPriceUrl}" title="个人中心"
alt="头像" style="border-radius:50%;" width=32px height=32px/>
<font color="#31B0D5" size="4" title="个人中心">${user.userName}</font></a>
|
<a href="${cxtPath}/userLogout">
<font color="#31B0D5" size="4" title="退出登录">退出</font></a>
</c:if></p>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="content">
<div class="movie_top">
<!--主体的左边-->
<div class="col-md-10 movie_box">
<div id="ckplayer" style="width: 800; height: 500;margin-top: -1%;"></div>
<script type="text/javascript">
CKobject.embed("ckplayer/ckplayer.swf", "ckplayer", "ckplayer1", "800",
"500", false, {
f : "video/mp4",
c : 0
}, ['${moviePath}${userName}/${movieResult.id}${movieResult.mvType}']
);
</script>
<br>
<p class="m_5">影片描述：${movieResult.message}</p>
<br><br><br>
<form method="post" action="${cxtPath}/saveArgu">
<div class="text">
<textarea value="Message" name="message" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = '我的评论:';}">我的评论:</textarea>
</div>
<div class="text">
<input value="001" name="movieId" id = "movieId" hidden />
</div>
<div class="form-submit1">
<input name="submit" type="submit" id="submit" value="评论"><br>
</div>
</form>
<!--评论列表-->
<div class="single">
<h1><font color="#FFFFFF">用户评论列表</font></h1>
<ul class="single_list">
<li>
<div class="preview">
<a href="#"><img src="images/2.jpg" class="img-responsive" alt="">芸芸</a>
</div>
<div class="data">
<div class="title" style="margin-left: 20px;">
<font color="#FFFFFF">2023.12.24 </font>
</div>
<p style="margin-left: 20px;">
<font color="#FFFFFF">人民英雄永垂不朽 烈士纪念日 9月30日</font>
</p>
<p align="right">
<a href="#">点赞</a> ||
<a href="#">回复</a> ||
<a href="#">举报</a>
</p>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="preview">
<a href="#"><img src="images/4.jpg" class="img-responsive" alt="个人头像">芸芸</a>
</div>
<div class="data">
<div class="title" style="margin-left: 20px;">
<font color="#FFFFFF">2023.12.24 </font>
</div>
<p style="margin-left: 20px;">
<font color="#FFFFFF">人民英雄永垂不朽 烈士纪念日 9月30日</font>
</p>
<p align="right">
<a href="#">点赞</a> ||
<a href="#">回复</a> ||
<a href="#">举报</a>
</p>
</div>
<div class="clearfix"></div>
</li>
<li class="middle">
<div class="preview">
<a href="#"><img src="images/5.jpg" class="img-responsive" alt="个人头像">芸芸</a>
</div>
<div class="data-middle">
<div class="title" style="margin-left: 20px;">
<font color="#FFFFFF">2023.12.24 </font>
</div>
<p style="margin-left: 20px;">
<font color="#FFFFFF">人民英雄永垂不朽 烈士纪念日 9月30日</font>
</p>
<p align="right">
<a href="#">点赞</a> ||
<a href="#">回复</a> ||
<a href="#">举报</a>
</p>
</div>
<div class="clearfix"></div>
</li>
<li class="last-comment">
<div class="preview">
<a href="#"><img src="images/6.jpg" class="img-responsive" alt="个人头像">芸芸</a>
</div>
<div class="data-last">
<div class="title" style="margin-left: 20px;">
<font color="#FFFFFF">2023.12.24 </font>
</div>
<p style="margin-left: 20px;">
<font color="#FFFFFF">人民英雄永垂不朽 烈士纪念日 9月30日</font>
</p>
<p align="right">
<a href="#">点赞</a> ||
<a href="#">回复</a> ||
<a href="#">举报</a>
</p>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="preview">
<a href="#"><img src="images/7.jpg" class="img-responsive" alt="个人头像">芸芸</a>
</div>
<div class="data">
<div class="title" style="margin-left: 20px;">
<font color="#FFFFFF">2023.12.24 </font>
</div>
<p style="margin-left: 20px;">
<font color="#FFFFFF">人民英雄永垂不朽 烈士纪念日 9月30日</font>
</p>
<p align="right">
<a href="#">点赞</a> ||
<a href="#">回复</a> ||
<a href="#">举报</a>
</p>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
</div>
<div class="col-md-2" style="margin-top: -20px">
<h3><font color="#FFFFFF">播放列表</font></h3>
<c:forEach items="${movies}" var="mv" begin="${i-0}" end="${i}">
<div class="grid_2 col_1">
<a href="${cxtPath}/player?movie=${mv.id}${mv.mvType}">
<c:if test="${mv.adminId!=null}">
<img src="${cxtPath}/${url}${mv.id}${mv.imgType}" title="点击播放"
class="img-responsive" alt="视频缩略图" style="width: 143.11px;height: 145px">
</c:if>
<c:if test="${mv.adminId==null}">
<img src="${cxtPath}/${url_user}${user.userName}/${mv.id}${mv.imgType}" title="点击播放"
class="img-responsive" alt="视频缩略图" style="width: 143.11px;height: 145px">
</c:if>
</a>
<div class="caption1">
<p class="m_3">${mv.movieName}</p>
<c:if test="${mv.id == movieResult.id}">
<p class="m_32" title="正在播放"> 正在播放 . . .</p>
</c:if>
</div>
</div>
</c:forEach>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
<!--页脚-->
<div class="container">
<footer id="footer">
<div id="footer-3d">
<div class="gp-container">
<span class="first-widget-bend"></span>
</div>
</div>
<div id="footer-widgets" class="gp-footer-larger-first-col">
<div class="gp-container">
<div class="footer_box">
<div class="clearfix"> </div>
</div>
<!--版权声明-->
<div class="copy" align="center">
<p>Copyright © 2020-2024.yx.</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</footer>
</div>
<script type="text/javascript">
const paramsString = window.location.search.substring(1);
const params = new URLSearchParams(paramsString);
var movieId = params.get("movie"); // "John"
movieId = movieId.replace(".mp4", "");
document.getElementById('movieId').value=movieId;
</script>
</body>
</html>
文章来源：https://www.toymoban.com/news/detail-833775.html
文章来源地址https://www.toymoban.com/news/detail-833775.html
到了这里，关于视频上传并播放的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
