play_videojs

vue + videojs:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=ed
猴子年华、

2729人浏览 · 2018-03-16 13:55:14
猴子年华、 · 2018-03-16 13:55:14 发布
vue + videojs:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<!-- 播放器样式 start-->
	  <link rel="stylesheet" type="text/css" href="/static/whcl/videojs/css/video-js.css">
		<!-- <link rel="stylesheet" type="text/css" href="/static/whcl/videojs/css/videojs-playlist-ui.css">
		<link rel="stylesheet" type="text/css" href="/static/whcl/videojs/css/play-next.css">
		<link rel="stylesheet" type="text/css" href="/static/whcl/videojs/css/font-awesome.min.css" > -->
		<!-- 播放器样式   end-->		
		<script src="/static/whcl/js/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
		<script src="/static/whcl/js/jquery.mCustomScrollbar.js"></script>
		<script src="https://cdn.wilddog.com/sdk/js/2.5.17/wilddog.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
		<script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.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>
	  <!-- 播放器js start-->
	  <script type="text/javascript" src="/static/whcl/videojs/js/video.js"></script>
		<!-- <script type="text/javascript" src="/static/whcl/videojs/js/videojs-playlist.js"></script>
		<script type="text/javascript" src="/static/whcl/videojs/js/videojs-playlist-ui.js"></script>
		<script type="text/javascript" src="/static/whcl/videojs/js/videojs-play-next-buttons.js"></script>
		<script type="text/javascript" src="/static/whcl/videojs/js/index.js"></script>
		<script type="text/javascript" src="/static/whcl/videojs/js/zh-CN.js"></script> -->
		<!-- 播放器js end-->
	</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 class="video_block">
						<video id="video" class="video-js vjs-default-skin vjs-big-play-centered" poster="http://vjs.zencdn.net/v/oceans.png" controls data-setup="{}">
					  </video>
					</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>
								{{ kecheng.FieldName }}
								次播放
							</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>{{ kecheng.FieldName}}
					</div>
				</div>
				<div class="classroom">
					<div class="classroom_title clear">
						<span>相关课程</span>
					</div>
					<div class="classroom_content">
						<ul class="list" class="vjs-playlist">
							<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.JingPin == 1">精品</span>
									<span class="time">{{ item.FieldName}}</span>
								</div>
								<div class="introduce">
									<div class="brief">
										<span @click="ClickChangeKC($event)" v-bind:class='{active:item.FieldName==getselected}'>{{ item.MingCheng }}</span>
										<span style="display: none;" :class="index">{{item}}</span>
									</div>
									<div class="aboutit clear">
										<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.FieldName}}</span>
										</span>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
				<!--页面底部-->
		<footer>			
		</footer>
	</div>
	<script type="text/javascript">
		var vLen = 0;
		var curr = 0; 
		var player;
		var vList = [];
		var sjc_num = 0;
		var shijianchuo_arr = [];
		var app = new Vue({
      el: '#app'
      ,data: {
    	kecheng: []       // 某节课程详细内容
      	,items: []        // 课程列表
      	,video_title: ''  // 课程链接
      	,getselected: ''  // 时间戳，数据的唯一标识
      	,id: ''  // 点赞的ID，为‘1’已赞过，为‘’未赞过
      	,videostate: {}
      	,zaned: 1
      	,bofanged: 1
      }
      ,methods: {
        getKecheng:function(typekecheng){
            var that = this;
          var url_page = '';
          this.$http.jsonp(url_page).then(function(res) {
            kechengList = res.rows;
            var src_type = {};
            var kcplayerlist = {};
            var j = 0;
            $.each(kechengList, function(i, n){
            	shijianchuo_arr.push(n.FieldName);
             	src_type['src'] = n.FieldName;
             	src_type['type'] = 'video/mp4';
             	kcplayerlist['sources'] = src_type;
             	kcplayerlist['poster'] = n.FieldName;
             	kcplayerlist['name'] = n.FieldName;
             	vList[j] = kcplayerlist;
             	j++;
			      });
			      sjc_num = shijianchuo_arr.length;
			      vLen = vList.length;
            var onelist = kechengList[that.getselected];
            player.src(onelist['FieldName']);
            this.iszan(onelist['FieldName']); // 判断是否点过赞
            that.kecheng = kechengList[that.FieldName];
            that.items = kechengList;
            that.video_title = onelist['FieldName'];
            this.addbofangshu(onelist);            
            this.bofanged = 2;
          });
        }
        ,ClickChangeKC:function(e){  // 点击选择播放课程
        	var e = e.target;
        	var newkecheng = JSON.parse(e.parentNode.lastChild.innerText);
        	this.getselected = newkecheng['FieldName'];
        	player.src(newkecheng['FieldName']);
        	this.iszan(newkecheng['FieldName']); // 判断是否点过赞
        	this.kecheng = newkecheng;
        	this.zaned = 2;
        	this.addbofangshu(newkecheng);
        }
        ,getNext:function(){ // 自动播放下一节课程
					var position = contains(shijianchuo_arr,this.getselected); // 获取时间戳的KEY
					if(position < sjc_num-1){
	          position++;
	          video_sjc = shijianchuo_arr[position];
	        }else{
	        	return false;
	          // video_key = 0;
	          // video_sjc = shijianchuo_arr[video_key];
	        }
	        var video_data = JSON.parse($('.'+video_sjc).html());
	        player.src(video_data['FieldName']);
	        this.iszan(video_data['FieldName']); // 判断是否点过赞
          this.getselected = video_sjc;
          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(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('http://192.168.70.26:8966/KeTang/ExistsZan?shijiancuo=' + shijiancuo + '&&userid=' + uid).then(function(res) {
     //        this.id = res;
     //      });
	  		}
	  		,addbofangshu:function(onedata){
	  			var BoFangCiShu = toString(onedata['FieldName']);
          if(BoFangCiShu.indexOf('万') == -1){
		        this.items[onedata['FieldName']]['FieldName']++;
		        if(this.bofanged == 2){
		  				this.kecheng['FieldName']++;
		  			}
			    }
			    this.$http.jsonp('').then(function(res) {});
	  		}
	  		,addzan:function(typenum,shijiancuo){
	  			var zannum = toString(this.items[FieldName]['FieldName']);
					if(zannum.indexOf('万') == -1){
						if(typenum == 1){
							this.items[FieldName]['FieldName']++;
			  			if(this.zaned == 2){
			  				this.kecheng['FieldName']++;
			  			}
						}
						if(typenum == 2){
							this.items[FieldName]['FieldName']--;
			  			if(this.zaned == 2){
			  				this.kecheng['FieldName']--;
			  			}
						}
			    }
			    // var uid = $.cookie('the_cookie');
	  			// this.$http.jsonp('').then(function(res) {});
	  		}
      }
      ,mounted:function(){
      	this.playvideo();
			}
    });

    (function($){
      $(window).on("load",function(){
        $(".classroom_content").mCustomScrollbar();
      });     	
    })(jQuery);
		player = videojs('#video',{
			controls: true  //控制条
　　　,preload: 'none' //是否自动加载
	    ,autoplay: true  //是否自动播放
	    ,loop: false
	    ,width: "810"
	    ,height: "462"	    
	    ,remainingTime: true
	    ,currentTime: true
	    ,controlBar: {
        volumePanel: {
          inline: false
        }
	    }
	    ,volumeMenuButton: { //竖着的音量条
				inline: false,
				vertical: true
			}

	  });
	  player.on('ended', function(e) {  //播放时间改变执行函数  
    	app.getNext();
   	});
	  function contains(a, obj) {  
      var i = a.length;  
      while (i--) {  
        if (a[i] == obj) {  
          return i;  
        }  
      }  
      return false;  
    }
	</script>
	
	</body>
</html>
Vue
前往低代码交流专区
更多推荐
vue 表单验证
1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^