JavaWeb开发中Cuplayer插件使用

最新推荐文章于 2021-12-05 22:05:43 发布

原创最新推荐文章于 2021-12-05 22:05:43 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java web #Cuplayer #黑屏但有声音 #视频播放器

Java 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了一种基于网页的视频播放器搭建过程，包括HTML、JavaScript前端代码实现及后台方法，同时探讨了黑屏但有声音的问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，发给你）