cuplayer酷播播放器

最新推荐文章于 2023-09-19 17:11:39 发布
猴子年华、
最新推荐文章于 2023-09-19 17:11:39 发布
阅读量1.3k
点赞数
分类专栏： Javascript Vue 文章标签： cuplayer
本文链接：https://blog.csdn.net/Lg632/article/details/79580980
版权
Javascript 同时被 2 个专栏收录
33 篇文章 0 订阅
订阅专栏
Vue
9 篇文章 0 订阅
订阅专栏
酷播播放器：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<script src="/static/whcl/js/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
		<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
		<script src="https://cdn.bootcss.com/js-polyfills/0.1.42/polyfill.js"></script>
	</head>
	<body>
	<div id="app">
		<div class="main">
			<div class="nav">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="content clear">
				<div class="video">
					<div class="video_title">{{ kecheng.FieldName}}</div>
					<div id="CuPlayer" class="video_block">

					</div>
					<div class="video_introduce clear">
						<p class="left">
							<span class="teacher">{{ kecheng.FieldName}}</span>
							<span class="date">{{ kecheng.FieldName}}</span>
						</p>
						<p class="right">
							<span class="play">
								<i class="iconfont icon-videoyoutube"></i>
								<span class="right_playnum">{{ kecheng.FieldName}}</span>
								次播放
							</span>
							<span class="zan">
								<i class="iconfont icon-dianzan" :class="{'active':id==10000}" @click="cancelz(kecheng.FieldName)"></i> 
								<i class="iconfont icon-like" :class="{'active':id==''}" @click="like('10000',$event,kecheng.FieldName)"></i>
								<i class="num">+1</i>
								{{ kecheng.FieldName}}赞
							</span>
						</p>
					</div>
					<div class="video_brief">
						<span>简介：<span class="brief_details">{{ kecheng.FieldName}}</span></span>
					</div>
				</div>
				<div class="classroom">
					<div class="classroom_title clear">
						<span>相关课程</span>
					</div>
					<div class="classroom_content">
						<ul class="list">
							<li class="clear" v-for="(item, index) in items">
								<div class="picture">
									<img v-bind:src="item.FieldName"/>
									<span class="mask"></span>
									<span class="excellent" v-if="item.FieldName== 1">精品</span>
									<span class="time">{{ item.FieldName}}</span>
								</div>
								<div class="introduce">
									<div class="brief">
										<span href="#" class="seltitle" @click="ClickChangeKC" v-bind:class='{active:item.FieldName==getselected}'>{{ item.MingCheng }}</span>
										<span style="display: none;" v-bind:class=" index ">{{item}}</span>
									</div>
									<div class="aboutit">
										<span class="play">
											<i class="iconfont icon-videoyoutube"></i><span class="lift_playnum">{{ item.FieldName}}</span>
										</span>
										<span class="zan">
											<i class="iconfont icon-dianzan" @click="clickzan()"></i>
											<span style="display: none;">{{item.FieldName}}</span>
											<span class="lift_zannum">{{ item.ZanFieldName}}</span>
										</span>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
				<!--页面底部-->
		<footer>
			
		</footer>

	<script type="text/javascript">
		var player;
		var sp = [];
		var CuPlayerList = [];
		var shijianchuoList = [];
		var num = 0;
		var sjc_num = 0;
		var video_index = '';
		var video_sjc = ''
		var shijianchuo_arr = [];
		var TuPianDiZhi;
		var app = new Vue({
      el: '#app'
      ,data: {
    		kecheng: []      // 某节课程详细内容
      	,items: []       // 课程列表
      	,video_title: '' // 课程链接
      	,getselected: '' // 时间戳，数据的唯一标识
      	,id: ''  // 点赞的ID，为‘1’已赞过，为‘’未赞过
      	,zaned: 1
      	,bofanged: 1
      }
      ,methods: {
        getKecheng:function(typekecheng){
          var url_page = '';
          axios.get(url_page).then(function(res) {
            kechengList = res.rows;
            var onelist = kechengList[this.FieldName];
            TuPianDiZhi = onelist['FieldName'];
            this.kecheng = kechengList[this.FieldName];
            this.items = kechengList;
            this.video_title = onelist['FieldName'];
            this.iszan(onelist['FieldName']); // 判断是否点过赞
            $.each(kechengList, function(i, n){
             	CuPlayerList[n.shijiancuo] = n.FieldName;
             	shijianchuo_arr.push(n.FieldName);
			      });  // 播放链接组成以时间戳为KEY的数组
            /* 播放器  ==================================================================================start  */
				    sp = CuPlayerList;
				    num = sp.length;
				    sjc_num = shijianchuo_arr.length;
				    video_sjc = this.getselected;
				    var so = new SWFObject("/static/whcl/playerlist/player.swf","ply","100%","100%","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","/static/whcl/playerlist/CuSunV4set.xml"); //* 必须存在/播放器配置文件地址
				    so.addVariable("JcScpVideoPath",sp[this.getselected]);
				    so.addVariable("JcScpImg",'http://192.168.70.26:8966'+onelist['TuPianDiZhi']);
				    so.addVariable("JcScpAutoPlay","no"); //是否自动播放
				    so.write("CuPlayer");
				    /* 播放器  =====================================================================================end  */  
				    this.addbofangshu(onelist);
				    this.bofanged = 2;         
          }.bind(this));
        }
        ,ClickChangeKC:function(){  // 点击选择播放课程
        	// var newkecheng = JSON.parse(event.currentTarget.nextElementSibling.innerText);
        	var newkecheng = JSON.parse(event.srcElement.parentNode.lastChild.innerText);
        	this.getselected = newkecheng['FieldName'];
        	video_sjc = newkecheng['FieldName'];
        	this.kecheng = newkecheng;
	        changeStream(sp[this.FieldName]);
	        this.iszan(newkecheng['FieldName']); // 判断是否点过赞
	        this.zaned = 2;
	        this.addbofangshu(newkecheng);
        }
        ,editsjc:function(shijiancuo,item_data){ // 自动播放下一个视频同步左侧数据
        	this.getselected = shijiancuo;
        	var video_data = JSON.parse(item_data);
        	this.iszan(video_data['FieldName']); // 判断是否点过赞
        	this.kecheng = video_data;
        	this.zaned = 2;
        	this.addbofangshu(video_data);
        }
        ,playvideo:function(){ // 从课程列表中跳转过来，获取url中GET参数，（课程的二级分类、时间戳）;
        	var reurl = window.location.href.indexOf('?');
        	var urlarr = window.location.href.substr(reurl+1).split('&');
        	var arrsjc = urlarr[0].indexOf('=');
        	var arrtype = urlarr[1].indexOf('=');
        	this.getselected = urlarr[0].substr(arrsjc+1); // 从课程列表中跳转过来，用时间戳选中点击的视频，在右侧列表中标红
        	this.getKecheng(parseInt(urlarr[1].substr(arrtype+1)));   // 课程的二级分类        	
        }
        ,like:function(id,e,shijiancuo){ // 点赞
	  			this.id=id;
	  			var el=e.target;
					$(el).next().fadeIn(500);
					$(el).next().fadeOut();
					this.addzan(1,shijiancuo);
	  		}
	  		,cancelz:function(shijiancuo){ // 取消点赞
	  			this.id='';
	  			this.addzan(2,shijiancuo);
	  		}
	  		,iszan:function(shijiancuo){ // 判断该用户对此视频是否点过赞
	  		// 	var uid = $.cookie('the_cookie');
					// this.$http.jsonp('').then(function(res) {
     //        this.id = res;
     //      });
	  		}
	  		,addbofangshu:function(onedata){
	  			var BoFangCiShu = toString(onedata['BoFangCiShu']);
          if(BoFangCiShu.indexOf('万') == -1){
		        this.items[onedata['shijiancuo']]['BoFangCiShu']++;
		        if(this.bofanged == 2){
		  				this.kecheng['BoFangCiShu']++;
		  			}
			    }
			    this.$http.jsonp('').then(function(res) {});
	  		}
	  		,addzan:function(typenum,shijiancuo){
	  			var zannum = toString(this.items[shijiancuo]['Zan']);
					if(zannum.indexOf('万') == -1){
						if(typenum == 1){
							this.items[shijiancuo]['Zan']++;
			  			if(this.zaned == 2){
			  				this.kecheng['Zan']++;
			  			}
						}
						if(typenum == 2){
							this.items[shijiancuo]['Zan']--;
			  			if(this.zaned == 2){
			  				this.kecheng['Zan']--;
			  			}
						}
			    }
			    // var uid = $.cookie('the_cookie');
	  			// this.$http.jsonp('').then(function(res) {});
	  		}
      }
      ,mounted:function(){
      	this.playvideo();
			}
    });
		
		 /* 播放器  ========================================================================================start  */
      function getNext(pars){  // 自动播放下一个视频
      	var position = contains(shijianchuo_arr,video_sjc); // 获取时间戳的KEY
        if(position < sjc_num-1){
          position++;
          video_sjc = shijianchuo_arr[position];
        }else{
        	return false;
          // video_key = 0;
          // video_sjc = shijianchuo_arr[video_key];
          // so.addVariable("CuPlayerFile",sp[video_sjc]); // 如果是到最后一个视频会重播，不跳到第一个视频          
        }
        so.addVariable("JcScpVideoPath",sp[video_sjc]);
        so.addVariable("JcScpAutoPlay","yes"); //是否自动播放
        so.write("CuPlayer");
        var item_data = $('.'+video_sjc).html();        
        app.editsjc(video_sjc,item_data);
        LeftScr(position);
     	}
     	function contains(a, obj) {  
        var i = a.length;  
        while (i--) {  
          if (a[i] == obj) {  
            return i;  
          }  
        }  
        return false;  
      } 
      function changeStream(CuPlayerFile){
        LeftScr(CuPlayerFile);
        video_index = CuPlayerFile;
        so.addVariable("JcScpVideoPath",CuPlayerFile);
        so.addVariable("JcScpAutoPlay","yes"); //是否自动播放
        so.write("CuPlayer");
        return false;
      }
      CuPlayerFile = sp[video_index];
      var so = new SWFObject("/static/whcl/playerlist/player.swf","ply","100%","100%","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","/static/whcl/playerlist/CuSunV4set.xml"); //* 必须存在/播放器配置文件地址
      so.addVariable("JcScpVideoPath",CuPlayerFile);
      so.addVariable("JcScpImg","http://vjs.zencdn.net/v/oceans.png");
      so.addVariable("JcScpAutoPlay","yes"); //是否自动播放
      so.write("CuPlayer");
      function LeftScr(m){
        var scrtop;
        if(m>1){
        scrtop=55*(m-1);
        }else{
          scrtop=0;
        }
        $(".list").animate({
          scrollTop:scrtop
        },130);
      }
      /* 播放器  ======================================================================================================end  */
	</script>
	</div>
	</body>
</html>