1.代码实现
(1)HTML:
<div class="container">
<p class="videotitle">【培训视频】<span></span></p>
<div class="title">讲师:<span></span> 发布时间:<span></span></div>
<div class="video-container mt20">
<!-- 开/关灯 -->
<div class="close_light_bg" id="close_light_bg"></div>
<!--播放器/代码开始-->
<div class="video" id="CuPlayer">
<b><img src="/TBFW/css4tbfw/player/loading.gif" /> 网页视频播放器加载中,请稍后...</b>
</div>
</div>
<p id="introduction">视频说明:<span></span></p>
</div>
(2)JS:
$(function() {
play();
});
function play() {
**.execute('tbfwtrainvideodetail.getVideo', null, null, function(data) {//调用后台action
$(".videotitle span").html(data.title);
$(".title span:eq(0)").html(data.teacher);
$(".title span:eq(1)").html(data.pubdate);
$("#introduction span").html(data.introduction);
var url=data.url;
var so = new SWFObject("/**/css4tbfw/player/player.swf", "myCuPlayer", "1000", "489", "9", "#000000");
so.addParam("allowfullscreen", "true");
so.addParam("allowscriptaccess", "always");
so.addParam("wmode", "opaque");
so.addParam("quality", "high");
so.addParam("salign", "lt");
so.addVariable("JcScpFile", "/**/js4tbfw/player/CuSunV3set.xml"); //配置文件地址
so.addVariable("JcScpVideoPath", url); //视频地址
so.write("CuPlayer");
});
}
(3)后台方法
public Record getVideo() {//获取视频相关信息
data = new Record();
String rowguid = getRequestParameter("RowGuid");
**Video video = service.find(**Video.class, rowguid);
if (video != null) {
data.set("title", video.getTitle());
data.set("url", video.getUrl());
data.set("teacher", video.getTeacher());
data.set("pubdate", EpointDateUtil.convertDate2String(video.getPubdate()));
data.set("introduction", video.getIntroduction());
addVideoPlay(video.getVideoguid());//增加浏览视频次数
}
return data;
}
public void addVideoPlay(String videoguid) {
**Videoplay dataBean = new **Videoplay();
dataBean.setRowguid(UUID.randomUUID().toString());
dataBean.setVideoguid(videoguid);
dataBean.setPlaydate(new Date());
dataBean.setOperatedate(new Date());
service.insert(dataBean);
}
(4)插件所需要的xml配置文件、swf文件、css、js以及一些必要图片(请留下QQ,发给你)
2.黑屏但有声音问题
Cuplayer播放器支持的视频格式含: Flv /mp4 /mov / F4v / 3GP(在考虑跨平台观看时,只考虑mp4一种格式,因为mp4的适配性较高)。
MP4格式需要进行转换,示意图(推荐使用狸窝全能视频转换器):