Java web video 视频开发
播放器
\flowplayer
1.下载Flowplayer播放器,
2.下载安装包解压后可以找到以下几个主要文件:
flowplayer-3.2.11.swf:用于播放器主体的flash文件
flowplayer.controls-3.2.11.swf:控制条文件,是个可选的插件
flowplayer-3.2.10.min.js:播放器的api文件,也用来装载整个播放器
3.在页面调用播放器前引入播放器的api脚本文件flowplayer-3.1.1.min.js,如下:
<script src="path/to/the/flowplayer-3.1.1.min.js"></script>
4.通过一个链接(<a>标签)指向视频文件的链接,并设定视频文件长宽,同时应为它指定一个id。该链接的位置即是视频显示的位置。如下:
<a href="/要播放的视频文件/a.flv" id="player"></a>
5.调用api为上一步设定的链接位置装载播放器,如下:
flowplayer("player","path/to/the/flowplayer-3.1.1.swf"); 播放器自身主体
上面代码中第一个参数是上一步中设定的链接id,第二个参数是播放器主体的flash文件路径。使用flowplayer()方法装载播放器时,可以指定非常多的参数来配置或个性化你的播放器。常用的例如:
<script>flowplayer("player","/hygg/resources/flash/flowplayer-3.2.7.swf", {
clip:{
autoPlay:false,//是否自动播放,默认true
//autoBuffering:true//是否自动缓冲视频,默认true
}
});
</script>
项目代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/flowplayer-3.2.10.min.js"></script>
</head>
<body>
<a href="flowplayer.flv" style="display:block;width:520px;height:330px" id="player"></a>
<script type="text/javascript"> flowplayer("player", "flowplayer-3.2.11.swf",{
clip:{
autoPlay:false,//是否自动播放,默认true
//autoBuffering:true//是否自动缓冲视频,默认true
}
});
</script>
</body>
</html>
========================================
视频 改进 1:
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<a href="userAction!add">添加用户</a>
<br>
<a href="userAction!update">更新用户</a>
<div style="margin-top: 200px;margin-left: 530px;">
<ul>
<li><s:a href="movie/main.action">去看电影 </s:a> </li>
<li><s:a href="shop/main.action">去买东西 </s:a> </li>
<li><s:a href="bbs/main.action">去论坛讨论 </s:a> </li>
<li><s:a href="notice/main.action">站内信息 </s:a> </li>
</ul>
</div>
</body>
</html>
-----------------------------------------------------
<action name="userAction" class="UserAction">
<!-- 添加成功的映射页面 -->
<result name="add">video1.jsp</result>
<!-- 更新成功的映射页面 -->
<result name="update">user_update.jsp</result>
-------------------------------------------------------
<bean id="UserAction" class="com.guang.action.UserAction" scope="prototype">
</bean>
----------------------------------------------------------------
package com.guang.action;
import com.opensymphony.xwork2.ActionSupport;
public class UserAction extends ActionSupport {
private static final long serialVersionUID = 1L;
// 提示信息
private String info;
// 添加用户信息
public String add() throws Exception{
info = "movie/flowplayer.flv";
return "add";
}
// 更新用户信息
public String update() throws Exception{
info = "更新用户信息";
return "update";
}
public String getInfo() {
return info;
}
public void setInfo(String info) {
this.info = info;
}
}
-------------------------------------------------------------
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/JavaScript" src="js/flowplayer-3.2.10.min.js"></script>
</head>
<body>
<s:a href = "%{info}" style="display:block;width:520px;height:330px" id="player"></s:a>
<script type="text/javascript"> flowplayer("player", "flowplayer-3.2.11.swf",{
clip:{
autoPlay:true,//是否自动播放,默认true
//autoBuffering:true//是否自动缓冲视频,默认true
}
});
</script>
<div style="margin-top: 100px;margin-left: 530px;">
<ul>
<li><s:a href="movie/main.action">新的下一首歌曲 </s:a> </li>
<li><s:a href="shop/main.action">去买东西 </s:a> </li>
<li><s:a href="bbs/main.action">去论坛讨论 </s:a> </li>
<li><s:a href="notice/main.action">站内信息 </s:a> </li>
</ul>
</div>
</body>
</html>
J:\erjie2\WebContent\movie\flowplayer.flv
=================================================================
<div id="main4">
<div id="main1-4">
<a href="videoAction?info=movie/1.flv">
<img src="${pageContext.request.contextPath }/images/5-7.jpg" width="340" height="150" />
</a>
</div>
</div>
---------------------------------------------------------
<action name="videoAction" class="VideoAction">
<!-- 添加成功的映射页面 -->
<result name="findAll">/admin/video2.jsp</result>
<result >/admin/video2.jsp</result>
<!-- 更新成功的映射页面 -->
<result name="update">user_update.jsp</result>
</action>
--------------------------------------------------------
<bean id="VideoAction" class="cn.itcast.shop.video.action.VideoAction" scope="prototype">
<property name="videoService" ref="videoService"/>
</bean>
<bean id="videoService" class="cn.itcast.shop.video.service.VideoService" scope="prototype">
<property name="videoDao" ref="videoDao"/>
</bean>
<bean id="videoDao" class="cn.itcast.shop.video.dao.VideoDao">
<property name="sessionFactory" ref="sessionFactory"/>
</bean>
<!-- 用户模块的Action -->
<!-- Service的配置 ===========================-->
<!-- Dao的配置 ===========================-->
---------------------------------------------------------------
package cn.itcast.shop.video.action;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.ServletActionContext;
import org.springframework.web.context.request.RequestAttributes;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
import cn.itcast.shop.adminuser.service.AdminUserService;
import cn.itcast.shop.adminuser.vo.AdminUser;
import cn.itcast.shop.category.vo.Category;
import cn.itcast.shop.video.dao.VideoDao;
import cn.itcast.shop.video.service.VideoService;
import cn.itcast.shop.video.vo.Video;
public class VideoAction extends ActionSupport implements ModelDriven<Video>{
private static final long serialVersionUID = 1L;
private String info;
public String getInfo() {
return info;
}
public void setInfo(String info) {
this.info = info;
}
private Video video = new Video();
public Video getModel() {
return video;
}
private VideoService videoService;
public void setVideoService(VideoService videoService) {
this.videoService = videoService;
}
public String execute() throws Exception{
ActionContext context=ActionContext.getContext();
HttpServletRequest request=(HttpServletRequest)context.get(ServletActionContext.HTTP_REQUEST);
info =request.getParameter("info");
List<Video> listVideo = videoService.findAllVideoService();
ActionContext.getContext().getValueStack().set("listVideo", listVideo);
System.out.println("info: " + info);
return SUCCESS;
}
// 后台查询所有视频的执行的方法
public String findAll() {
return "findAll";
// ActionContext context =ActionContext.getContext();
// info = context.getName();
// if(info.equals(""))
// {
// List<Video> listVideo = videoService.findAllVideoService();
// ActionContext.getContext().getValueStack().set("listVideo", listVideo);
//
// return "findAll";
// }
// else {
// List<Video> listVideo = videoService.findAllVideoService();
// ActionContext.getContext().getValueStack().set("listVideo", listVideo);
// }
}
}
--------------------------------------------------------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/JavaScript" src="js/flowplayer-3.2.10.min.js"></script>
</head>
<body>
<s:a href ="%{info}" style="display:block;width:520px;height:330px" id="player"></s:a><script type="text/javascript"> flowplayer("player", "flowplayer-3.2.11.swf",{
clip:{
autoPlay:true,//是否自动播放,默认true
//autoBuffering:true//是否自动缓冲视频,默认true
}
});
</script>
<s:iterator value="listVideo" >
<li>
<s:a href="videoAction?info=%{url}" title="%{introduce}">
<div class="" style="width: 200px;">
<s:property value="name"/>
</div>
</s:a>
</li>
<br>
</s:iterator>
<div style="margin-top: 100px;margin-left: 530px;">
<ul>
<li><s:a href="userAction!add">新的下一首歌曲 </s:a> </li>
<li><s:a href="shop/main.action">去买东西 </s:a> </li>
<li><s:a href="bbs/main.action">去论坛讨论 </s:a> </li>
<li><s:a href="notice/main.action">站内信息 </s:a> </li>
</ul>
</div>
</body>
</html>
-------------------------------------------------
create table video ( id int not null primary key auto_increment ,
name varchar(100) not null ,
introduce varchar(1000) not null ,
type int not null,
url varchar(1000) not null
);
insert into video values( 1 , '星月神话' , '古装爱情剧' , 1 , 'movie/1.flv' );
insert into video values( 2 , '第一次爱的人' , '歌曲散发爱情' , 1 , 'movie/2.mp4' );
=========================================================
原文链接: http://blog.csdn.net/magang255/article/details/52684733