日志-2021-8-4
RtZhao
 2021-08-04 11:18:18   1.5k 字  6 分钟  

多视频加载

video.js

html

1
2
3
4
5
6
7
8
<video id="myVideo2" class="video-js vjs-big-play-centered vjs-fluid" preload=auto>
	<p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
		<a href="https://videojs.com/html5-video-support/" target="_blank">
        	supports HTML5 video
        </a>
    </p>
</video>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/*---------------------------------------
  Player section              
-----------------------------------------*/
.video-js {
	/* 给.video-js设置字体大小以统一各浏览器样式表现，因为video.js采用的是em单位 */
	font-size: 14px;
}

.video-js button {
	outline: none;
}

.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 {
	/* 视频占满容器高度 */
	height: 100%;
	background-color: #161616;
}

.vjs-poster {
	background-color: #161616;
}

.video-js .vjs-big-play-button {
	/* 中间大的播放按钮 */
	font-size: 2.5em;
	line-height: 2.3em;
	height: 2.5em;
	width: 2.5em;
	-webkit-border-radius: 2.5em;
	-moz-border-radius: 2.5em;
	border-radius: 2.5em;
	background-color: rgba(115, 133, 159, .5);
	border-width: 0.12em;
	margin-top: -1.25em;
	margin-left: -1.75em;
}

.video-js.vjs-paused .vjs-big-play-button {
	/* 视频暂停时显示播放按钮 */
	display: block;
}

.video-js.vjs-error .vjs-big-play-button {
	/* 视频加载出错时隐藏播放按钮 */
	display: none;
}

.vjs-loading-spinner {
	/* 加载圆圈 */
	font-size: 2.5em;
	width: 2em;
	height: 2em;
	border-radius: 1em;
	margin-top: -1em;
	margin-left: -1.5em;
}

.video-js .vjs-control-bar {
	/* 控制条默认显示 */
	display: flex;
}

.video-js span{
	color: #fff;
}

.video-js .vjs-time-control {
	display: block;
}

.video-js .vjs-remaining-time {
	display: none;
}

.vjs-button>.vjs-icon-placeholder:before {
	/* 控制条所有图标，图标字体大小最好使用px单位，如果使用em，各浏览器表现可能会不大一样 */
	font-size: 22px;
	line-height: 1.9;
}

.video-js .vjs-playback-rate .vjs-playback-rate-value {
	line-height: 2.4;
	font-size: 18px;
}

/* 进度条背景色 */
.video-js .vjs-play-progress {
	color: #ffb845;
	background-color: #ffb845;
}

.video-js .vjs-progress-control .vjs-mouse-display {
	background-color: #ffb845;
}

.vjs-mouse-display .vjs-time-tooltip {
	padding-bottom: 6px;
	background-color: #ffb845;
}

.video-js .vjs-play-progress .vjs-time-tooltip {
	display: none !important;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
function myPlayer(id, src) {
	var player = videojs(document.getElementById(id), {
		controls: true, // 是否显示控制条
		// poster: 'xxx', // 视频封面图地址
		preload: 'auto',
		autoplay: false,
		fluid: true, // 自适应宽高
		language: 'zh-CN', // 设置语言
		muted: true, // 是否静音
		inactivityTimeout: false,
		controlBar: { // 设置控制条组件
			/* 设置控制条里面组件的相关属性及显示与否
			'currentTimeDisplay':true,
			'timeDivider':true,
			'durationDisplay':true,
			'remainingTimeDisplay':false,
			volumePanel: {
			  inline: false,
			}
			*/
			/* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
			children: [{
					name: 'playToggle'
				}, // 播放按钮
				{
					name: 'currentTimeDisplay'
				}, // 当前已播放时间
				{
					name: 'progressControl'
				}, // 播放进度条
				{
					name: 'durationDisplay'
				}, // 总时间
				{ // 倍数播放
					name: 'playbackRateMenuButton',
					'playbackRates': [0.5, 1, 1.5, 2, 2.5]
				},
				{
					name: 'volumePanel', // 音量控制
					inline: false, // 不使用水平方式
				},
				{
					name: 'FullscreenToggle'
				} // 全屏
			]
		},
		sources: [ // 视频源
			{
				src: src,
				type: 'video/mp4',
				poster: ''
			}
		]
	});
	
}

function report(){
	var y1=document.getElementById('myVideo1').getBoundingClientRect().top;
	var flag=y1 < document.documentElement.clientHeight;
	
	if(flag){
			myPlayer('myVideo1', 'videos/actual-welding.mp4')
			myPlayer('myVideo2', 'videos/mobile-trolley-welding.mp4')
			myPlayer('myVideo4', 'videos/mobile-trolley-welding.mp4')			
			clearInterval(timer);
	}
	
	
}

var timer=null;

function myFunction() {
    timer = setInterval(report,100);
}

myFunction()


github提交

创建仓库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
进到要上传的文件夹，初始
$ cd ...
$ git init

添加所有文件夹，备注信息
$ git add .
$ git commit -m "备注"

连接到github仓库
$ git remote add origin <仓库地址>
如果不是第一次上传，远程origin已存在，可以删除重新添加新的后再配置
$ git remote rm origin

推送到master分支
$ git push -u origin master

之后每天这样提交即可

1
2
3
$ git add .
$ git commit -m "n commit"
$ git push -u origin master

提交github验证问题

guthub 拒绝了老版本git弹窗验证方式

1
2
3
$ ipconfig /flushdns     #清除DNS缓存内容。
$ ipconfig /displaydns    #显示DNS缓存内容
$ git update-git-for-windows #更新版本

OpenSSL SSL_read: Connection was reset, errno 10054

服务器的SSL证书没有经过第三方机构的签署，所以报错

1
$ git config --global http.sslVerify "false"

Layui

😘

layui - 在每一个细节中，用心与你沟通

官网

闲心：一直是一个人，所以很多时候精力时间都跟不上。只能希望大家平时多理解。

webpack

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

Visio

官网

Office Visio是Office软件系列中的负责绘制流程图和示意图的软件，是一款便于IT和商务人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件。

使用具有专业外观的 Office Visio 图表，可以促进对系统和流程的了解，深入了解复杂信息并利用这些知识做出更好的业务决策。

memcached

memcached是一套分布式的高速缓存系统，由LiveJournal的Brad Fitzpatrick开发，被许多网站使用。这是一套开放源代码软件，以BSD license授权发布。与redis相似

Freemarker

在线手册

FreeMarker是一款Java模板引擎。

与JSP相比，FreeMarker的一个优点在于不能轻易突破模板语言开始编写Java代码，因此降低了领域逻辑漏进视图层的危险几率。

但缺点是需要一点附加配置来将其平稳地集成到应用程序中，一些IDE可能并不完全支持它，当然还有开发者或设计者也许需要学习一门陌生的模板语言。

Shiro

Apache Shiro是一个强大且易用的Java安全框架,执行身份验证、授权、密码和会话管理。

使用Shiro的易于理解的API,您可以快速、轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序。

  • 本文标题：日志-2021-8-4
  • 本文作者：RtZhao
  • 创建时间：2021-08-04 11:18:18
  • 本文链接：https://www.rtzhao.site/2021/08/04/日志-2021-8-4/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
 评论