play_videojs

最新推荐文章于 2024-03-13 15:13:02 发布
最新推荐文章于 2024-03-13 15:13:02 发布
阅读量2.6k 收藏
点赞数
分类专栏： Javascript Vue 文章标签： videojs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lg632/article/details/79580754
版权

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>

猴子年华、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
video.js使用教程以及遇到的问题
qq_32066825的博客
04-03 4111
video这个标签在html中也是有的，但是为了自定义一些好用的样式和方法，我们通常会采用一些开源的播放器插件，这里介绍给第一次接触时不知道如何使用的朋友。 一. video.js 的下载 首先先附上 video.js的官网https://videojs.com/，想要使用video.js 首先得去下载这个js，这里提供GitHub上的项目，自行Download，https://githu...
videojs-playlist:videojs的播放列表插件
05-06
videojs播放列表 在video.js中启用播放列表的插件 维护状态：稳定 安装 通过npm安装videojs-playlist（首选）： $ npm install videojs-playlist 或凉亭： $ bower install videojs-playlist 包容性 使用您选择的工具在您的网站上包含videojs-playlist。 夹杂物的最简单的方法是[removed]所述的Video.js后标签[removed]标记： < script src =" path/to/video.js/dist/video.js " > </ script > < script src =" path/to/videojs-playlist/dist/videojs-playlist.js " > </ script > 通过npm安装时，videojs-playlis
引入Videojs之后，不能直接通过dom来调取video标签的play()方法解决方案
wflsyf的博客
10-18 955
只要先定位到video标签的父类，然后再获取video标签即可。 例如： <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> 引入css和js <link href="http://localhost:8080/dpplayer/video-js.css" rel="stylesheet"> <script src="http://loc
vue中使用video.js，且可以截图、录制和下载视频
最新发布
weixin_44042792的博客
03-13 709
1. 安装video.js。
videojs-player视频播放技术学习
Sunnyztg的博客
06-19 7387
vue3的视频播放器技术
video-04-videojs配置及使用
大雾起了清晨
06-29 7332
（保姆级教程）videojs是一种轻框架，可以帮我们快速开发一个video视频组件
【vue】视频播放器video.js插件使用：
SunPeng的博客
10-05 5292
【vue】视频播放器video.js插件使用：
videojs-airplay
07-24
videojs-airplay模块似乎只支持 VideoJS 5.x 版，而我们的@silvermine/videojs-airplay模块支持 VideoJS 6.x。 我如何使用它？ @silvermine/videojs-airplay插件包括 3 种类型的资产：javascript、CSS 和图像。 ...
video js for play video,
10-08
Video.js是一款优秀的HTML5 Web视频播放器。它同时支持 HTM5 和 Flash 视频，支持在桌面和移动设备上的视频播放，截至目前，大概有40W的站点在使用Video.js作为web播放器。
react-videojs-hook
05-28
react-videojs-钩子 video.js的React挂钩 使用npm安装 npm install --save react-videojs-hook npm install --save video.js 用纱安装 yarn add react-videojs-hook yarn add video.js 用法 import React from '...
video.js使用改变ui过程
01-19
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，...video id=my_video class=video-js vjs-default-skin vjs-big-play-centered my-vedio preload=auto controls width=800 height=600 align=middle poster=im
piwigo-videojs安装说明和必须安装的软件
03-13
我这里介绍的是piwigo-videojs，视频插件，我在安装时候走了很多弯路，这里先说下 Piwigo 11.3.0 是支持本插件的 php.ini需要开启 system，putenv，shell_exec 这三个权限 视频生成缩略图，由于主机设置PHP程序执行...
videojs-playlist 视频列表播放_videojs列表
09-19
videojs-playlist 视频列表播放
videojs-playlist, 用于播放多个音频音轨或者多个视频的插件.zip
09-18
videojs-playlist, 用于播放多个音频音轨或者多个视频的插件 Video.js-播放列表用于播放多个视频或者多个音频音轨的视频js插件。 它是中越来越多的插件之一，用于出色的视频库库( ) 。的基本原理：开发这个插件的主要目标是播放的音频文件。 可以以通过将 <video> 交换为
videojs 播放视频
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-17 2515
背景：动态更换播放的视频源时，需要先用dispose()销毁，再重新创建，dispose方法会连同dom一同删除，故需要创建dom （如果直接创建video元素，注意生成的object不能在video标签下面，否则页面不报错但不能播放，最好创建一个div ,将其innerHTML设为’
基于videojs实现带有播放列表播放页面
梅川酷紫
09-27 1万+
基于videojs实现带有播放列表播放页面videojs播放器的CSS样式修改视频暂停不显示播放按钮中间播放按钮变圆形播放列表实现1、引入插件2、增加播放列表html3、增加js代码效果图 videojs播放器的CSS样式修改 videojs原生的样式有些比较不符合个人习惯，就做了部分修改。 视频暂停不显示播放按钮 增加一个css样式即可： .vjs-paused .vjs-big-play-bu...
【VideoJs】初识videojs && video.js 视频播放器的基本使用 && videojs基础用法 && videojs视频播放器 && vue3中使用videojs
此人太懒，没有任何简介
03-06 5535
【VideoJs】vue3中使用videojs && video.js 视频播放器的基本使用 && videojs基础用法 && videojs视频播放器
js异步与解决Promise IE兼容问题
热门推荐
猴子年华的专栏
10-31 1万+
Promise使用与解决IE兼容问题
html5预览上传图片缩略图
猴子年华的专栏
09-17 9895
html5预览上传图片缩略图
videojs使用播放器
08-24
然后，在 JavaScript 代码中，你可以通过调用 `videojs` 函数初始化播放器，并传入要操作的 `<video>` 元素的 id。例如： ```javascript var player = videojs('my-video'); ``` 现在，你就可以通过 `player` 对象...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值