docker 研習講義

參考網址:https://kawsing.gitbook.io

卓國興老師的docker講義

安裝
curl -sSL https://get.docker.com | sudo sh
sudo usermod -aG docker your-user(這裡改成你的使用者名稱,我用root)
sudo reboot

docker info 可以看到Container放置的位置
參考https://marcus116.blogspot.com/2019/03/change-download-docker-image-path.html

docker run hello-world 測試 docker 是否正常

docker images 
目前已下載images列表

docker ps
可以發現執行中的容器。

docker ps -a
要檢視已經被中止的容器,請加入 -a 的選項

docker start 容器
處於終止狀態的容器,可以透過 docker start 命令來重新啟動

WebUI : portainer
 

docker run -d --privileged --name portainer -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock --restart=always -v /docker/portainer/data:/data portainer/portainer

忘記密碼:把母機端的 /docker/portainer/data 資料刪除,重新啟動。就可以重新設定密碼了。

發表於 Linux系統, 軟體使用 | 發表迴響

HTML img title 與 img alt 的差別

參考網址:wibibi

HTML img title 與 img alt 的範例
 

<img src="#" alt="圖片失效就顯示這段文字" style="border:1px black solid;"> 
<img src="圖片網址" title="滑鼠移上來就看得到文字" style="border:1px black solid;">

 

發表於 程式設計 | 發表迴響

改變HTML5 audio 播放器 尺寸

參考網址:
是否可以在html5中更改音頻播放器的尺寸
 

<audio>可以作爲任何其他html元素的樣式。

要增加寬度,只需使用css屬性width

一些HTML代碼:

<audio id="player" controls autoplay> 
  <source src="http://xseignard.github.com/webGLWebAudioAPI/sound/OGLikeCapone.ogg" type="audio/ogg"> 
  Your browser does not support the audio tag. 
</audio>​​​

 

而CSS:

#player { 
 width: 100%; 
}​ 

 

Html5的video标签自动填充满父div的大小

創建一個自定義HTML5音頻播放器

發表於 程式設計 | 發表迴響

JS控制HTML5 video/audio的一些參數和實例

參考網址:JS控制html5 video/audio的一些參數和實例

这是一个js播放代码案例:
 

var myAudioWin = new Audio();
 myAudioWin.setAttribute("src", "yaoyao/haha.mp3");
myAudioWin.play();//播放

 

其他详细请看下面:
<audio>标签属性:
src:音乐的URL
preload:预加载
autoplay:自动播放
loop:循环播放
controls:浏览器自带的控制条
Html代码
 

<audio id="media" src="http://www.abc.com/test.mp3" controls></audio>

<video>标签属性:
src:视频的URL
poster:视频封面,没有播放时显示的图片
preload:预加载
autoplay:自动播放
loop:循环播放
controls:浏览器自带的控制条
width:视频宽度
height:视频高度
Html代码
 

<video id="media" src="http://www.abc.com/test.mp4" controls width="400px" heigt="400px"></video>  

 

获取HTMLVideoElement和HTMLAudioElement对象
 

//audio可以直接通过new创建对象  
Media = new Audio("http://www.abc.com/test.mp3");  
//audio和video都可以通过标签获取对象  
Media = document.getElementById("media"); 

 

Media方法和属性:
HTMLVideoElement 和HTMLAudioElement 均继承自HTMLMediaElement
Js代码
 

1.   //错误状态  
2.      Media.error; //null:正常  
3.      Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效  
4.     
5.   //网络状态  
6.      Media.currentSrc; //返回当前资源的URL  
7.      Media.src = value; //返回或设置当前资源的URL  
8.      Media.canPlayType(type); //是否能播放某种格式的资源  
9.      Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  
10.     Media.load(); //重新加载src指定的资源  
11.     Media.buffered; //返回已缓冲区域,TimeRanges  
12.     Media.preload; //none:不预载 metadata:预载资源信息 auto:  
13.    
14.  //准备状态  
15.     Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  
16.     Media.seeking; //是否正在seeking  
17.    
18.  //回放状态  
19.     Media.currentTime = value; //当前播放的位置,赋值可改变位置  
20.     Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0  
21.     Media.duration; //当前资源长度 流返回无限  
22.     Media.paused; //是否暂停  
23.     Media.defaultPlaybackRate = value;//默认的回放速度,可以设置  
24.     Media.playbackRate = value;//当前播放速度,设置后马上改变  
25.     Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文  
26.     Media.seekable; //返回可以seek的区域 TimeRanges  
27.     Media.ended; //是否结束  
28.     Media.autoPlay;  //是否自动播放  
29.     Media.loop;  //是否循环播放  
30.     Media.play();    //播放  
31.     Media.pause();   //暂停  
32.    
33.  //控制  
34.     Media.controls;//是否有默认控制条  
35.     Media.volume = value; //音量  
36.     Media.muted = value; //静音  
37.    
38.     //TimeRanges(区域)对象  
39.     TimeRanges.length; //区域段数  
40.     TimeRanges.start(index) //第index段区域的开始位置  
41.     TimeRanges.end(index) //第index段区域的结束位置
事件JS代碼:
1.          eventTester = function(e){  
2.       Media.addEventListener(e,function(){  
3.           console.log((new Date()).getTime(),e);  
4.       });  
5.   }  
6.     
7.   eventTester("loadstart");   //客户端开始请求数据  
8.   eventTester("progress");    //客户端正在请求数据  
9.   eventTester("suspend");     //延迟下载  
10.  eventTester("abort");       //客户端主动终止下载(不是因为错误引起),  
11.  eventTester("error");       //请求数据时遇到错误  
12.  eventTester("stalled");     //网速失速  
13.  eventTester("play");        //play()和autoplay开始播放时触发  
14.  eventTester("pause");       //pause()触发  
15.  eventTester("loadedmetadata");  //成功获取资源长度  
16.  eventTester("loadeddata");  //  
17.  eventTester("waiting");     //等待数据,并非错误  
18.  eventTester("playing");     //开始回放  
19.  eventTester("canplay");     //可以播放,但中途可能因为加载而暂停  
20.  eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕  
21.  eventTester("seeking");     //寻找中  
22.  eventTester("seeked");      //寻找完毕  
23.  eventTester("timeupdate");  //播放时间改变  
24.  eventTester("ended");       //播放结束  
25.  eventTester("ratechange");  //播放速率改变  
26.  eventTester("durationchange");  //资源长度改变  
27.  eventTester("volumechange");    //音量改变 

發表於 程式設計 | 發表迴響

HTML5 audio 標籤方法和函數API介紹

參考網址:
HTML5 audio 標籤方法和函數API介紹

文章目录:

  • audio常用属性

  • audio音乐格式的支持

  • audio属性

  • 参数说明

最近在搞audio方面的h5页面,遇到一些坑,希望这篇文章对大家有所帮助。

audio常用属性

那么首先来看一下audio标签中的一些常用属性:

属性 属性值 注释
src url 播放的音乐的url地址(火狐只支持ogg的音乐,而IE9只支持MP3格式的音乐。chrome貌似全支持)
preload preload 预加载(在页面被加载时进行加载或者说缓冲音频),如果使用了autoplay的话那么该属性失效。
loop loop 循环播放
controls controls 是否显示默认控制条(控制按钮)
autoplay autoplay 自动播放

audio音乐格式的支持

来看下对于音乐格式的支持:

音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 不支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支

audio可通过new来创建。也可以通过用document来获取。

//通过new关键字来创建Audio对象
var Music = new Audio("test.mp3");
//通过document来获取已经存在的Audio对象
var Music = document.getElementById("audio");
//当然这里也可以使用document.getElementsByClassName('className')等其他的方法来获取。
然后我们来看下api所提供的对audio标签操作的一些属性和方法

audio属性

属性 注释
duration 获取媒体文件的总时长,以s为单位,如果无法获取,返回NaN
paused 如果媒体文件被暂停,那么paused属性返回true,反之则返回false
ended 如果媒体文件播放完毕返回true
muted 用来获取或设置静音状态。值为boolean
volume 控制音量的属性值为0-1;0为音量最小,1为音量最大
startTime 返回起始播放时间
error 返回错误代码,为uull的时候为正常。否则可以通过Music.error.code来获取具体的错误代码:
1.用户终止 2.网络错误 3.解码错误 4.URL无效
currentTime 用来获取或控制当前播放的时间,单位为s。
currentSrc 以字符串形式返回正在播放或已加载的文件

那么来看下这边常用的控制用的函数:

函数 作用
load() 加载音频、视频软件
play() 加载并播放音频、视频文件或重新播放暂停的的音频、视频
pause() 暂停出于播放状态的音频、视频文件
canPlayType(obj) 测试是否支持给定的Mini类型的文件

参数说明

关于audio标签API中的常用事件。
首先绑定事件的话可以通过js中的addEventListener方法来绑定事件。
Music.addEventListener(string:事件类型/名称,function:具体事件促发时的执行,boolean:是否使用捕捉,默认为false);

1、type:String 事件的类型。
2、listener:Function 侦听到事件后处理事件的函数。 此函数必须接受 Event 对象作为其唯一的参数,并且不能返回任何结果,如以下示例所示: 访问修饰符 function 函数名(evt:Event):void
3、useCapture:Boolean (default = false)

这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。顺序为:捕获阶段(根节点到子节点检查是否调用了监听 函数)→目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。

要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将 useCapture 设置为 true,第二次再将useCapture 设置为 false。

常用audio的事件:

事件名称 事件作用
loadstart 客户端开始请求数据
progress 客户端正在请求数据(或者说正在缓冲)
play play()和autoplay播放时
pause pause()方法促发时
ended 当前播放结束
timeupdate 当前播放时间发生改变的时候。播放中常用的时间处理哦
canplaythrough 歌曲已经载入完全完成
canplay 缓冲至目前可播放状态。
發表於 程式設計 | 發表迴響

HTML5 audio 如何實現播放多個MP3音頻

參考網址:
HTML5 audio 如何實現播放多個MP3音頻
 

<div id="audioBox"> 
<script type="text/javascript"> 
window.onload = function(){ 
var arr = ["http://www.lmlblog.com/blog/bozhao/images/believe.mp3","http://www.lmlblog.com/blog/bozhao/images/shui.mp3"];               //把需要播放的歌曲從後往前排,這裏已添加兩首音樂,可繼續添加多個音樂 
var myAudio = new Audio(); 
myAudio.preload = true; 
myAudio.controls = true; 
myAudio.src = arr.pop();         //每次讀數組最後一個元素 
myAudio.addEventListener(‘ended‘, playEndedHandler, false); 
myAudio.play(); 
document.getElementById("audioBox").appendChild(myAudio); 
myAudio.loop = false;//禁止循環,否則無法觸發ended事件 
function playEndedHandler(){ 
myAudio.src = arr.pop(); 
myAudio.play(); 
console.log(arr.length); 
!arr.length && myAudio.removeEventListener(‘ended‘,playEndedHandler,false);//只有一個元素時解除綁定 
} 
} 
</script> 
</div>

 

發表於 程式設計 | 發表迴響

wordpress 檔案權限

參考網址:http://benjr.tw/10912

root@ubuntu:~# ll -a /var/www/html
total 196
drwxr-xr-x  5 root       root      4096 Oct 30 23:24 ./
drwxr-xr-x  3 root       root      4096 Oct 30 23:23 ../
-rw-rw-r--  1 root       www-data     0 Oct 31 00:11 .htaccess
-rw-r--r--  1 root       root       418 Sep 24  2013 index.php
-rw-r--r--  1 root       root     19935 Jan  2  2017 license.txt
-rw-r--r--  1 root       root      7413 Dec 12  2016 readme.html
-rw-r--r--  1 root       root      5447 Sep 27  2016 wp-activate.php
drwxr-xr-x  9 www-data   www-data  4096 Sep 19 14:21 wp-admin/
-rw-r--r--  1 root       root       364 Dec 19  2015 wp-blog-header.php
-rw-r--r--  1 root       root      1627 Aug 29  2016 wp-comments-post.php
-r--r-----  1 root       www-data  3273 Oct 30 23:23 wp-config.php
drwxrwxr-x  5 root       www-data  4096 Oct 30 23:40 wp-content/
-rw-r--r--  1 root       root      3286 May 24  2015 wp-cron.php
drwxr-xr-x 18 root       root     12288 Sep 19 14:21 wp-includes/
-rw-r--r--  1 root       root      2422 Nov 20  2016 wp-links-opml.php
-rw-r--r--  1 root       root      3301 Oct 24  2016 wp-load.php
-rw-r--r--  1 root       root     34327 May 12 10:12 wp-login.php
-rw-r--r--  1 root       root      8048 Jan 10  2017 wp-mail.php
-rw-r--r--  1 root       root     16200 Apr  6  2017 wp-settings.php
-rw-r--r--  1 root       root     29924 Jan 24  2017 wp-signup.php
-rw-r--r--  1 root       root      4513 Oct 14  2016 wp-trackback.php
-rw-r--r--  1 root       root      3065 Aug 31  2016 xmlrpc.php
root@ubuntu:~# ll /var/www/html/wp-content/
total 24
drwxrwxr-x 5 root www-data 4096 Oct 30 23:40 ./
drwxr-xr-x 5 root root     4096 Oct 30 23:24 ../
-rw-rw-r-- 1 root www-data   28 Jan  8  2012 index.php
drwxrwxr-x 3 root www-data 4096 Oct 31 00:07 plugins/
drwxrwxr-x 5 root www-data 4096 Sep 19 14:21 themes/
drwxrwxr-x 2 root www-data 4096 Oct 30 23:25 uploads/

 

發表於 軟體使用 | 發表迴響

scratch 參考網站

參考網址:進學國小資訊組

發表於 程式設計 | 發表迴響

樹莓派外殻 raspberry

參考網址:taobao

讓樹莓派清涼一下

 

發表於 硬體維修 | 發表迴響

ssh 免密碼設定失敗原因總結

參考網址:itread

ssh 免密碼設定失敗原因總結。

先複習一下設定ssh免密碼操作的步驟:

進入主目錄

cd

生成公鑰

ssh-keygen -t rsa -P '' (注:最後是二個單引號,表示不設定密碼)

然後分發公鑰到目標機器

ssh-copy-id -i ~/.ssh/id_rsa.pub 使用者名稱@對方機器IP (注意不要忘記了引數-i)

注:ssh-copy-id -i 是最簡單的辦法,如果不用這個,就得分二個步驟:

a) 先scp 將本機的id_rsa.pub複製到對方機器的.ssh目錄下

b) 在對方機器上執行 cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys 匯入公鑰

 

上面的操作完成後,就可以用 ssh 對方機器IP 來測試了,順利的話,應該不會提示輸入密碼。

 

如果失敗,有可能是以下原因:

1、許可權問題

.ssh目錄,以及/home/當前使用者 需要700許可權,參考以下操作調整

sudo chmod 700 ~/.ssh

sudo chmod 700 /home/當前使用者

.ssh目錄下的authorized_keys檔案需要600或644許可權,參考以下操作調整

sudo chmod 600 ~/.ssh/authorized_keys

2、StrictModes問題

編輯

sudo vi /etc/ssh/sshd_config

找到

#StrictModes yes

改成

StrictModes no

如果還不行,可以用ssh -vvv 目標機器ip 檢視詳情,根據輸出內容具體問題具體分析了

【另一個參考網站】matt-u
StrictModes no   #修改为no,默认为yes.如果不修改用key登陆是出现server refused our key(如果StrictModes为yes必需保证存放公钥的文件夹的拥有与登陆用户名是相同的.“StrictModes”设置ssh在接收登录请求之前是否检查用户家目录和rhosts文件的权限和所有权。这通常是必要的,因为新手经常会把自己的目录和文件设成任何人都有写权限。) 

之后重新启动ssh服务:/etc/init.d/ssh restart 

 

【結論】
server端:120.116.xxx.xxx
StrictModes no
client端下指令時 ssh sa@120.116.xxx.xxx -p808
~/.ssh/authorized_keys <== 檔案為sa的檔案(即使sa為0:0位置仍是/home/sa/.ssh)

client端:163.26.xxx.xxx
複製公鑰到對方主機
ssh-copy-id -i ~/.ssh/id_rsa.pub sa@對方機器IP  -p808 (注意不要忘記了引數-i) 
下指令時 ssh sa@120.116.xxx.xxx -p808
因 sa為(0:0)所以會去讀 root/.ssh/id_rsa 及 id_rsa.pub
所以要把/home/sa/.ssh 的檔案複製到/root/.ssh

使用習慣:
client 端用root權限跑,因為還需設定crontab
server用sa權限認證,比較安全。

再次總結
client 端用root權限跑,所以先切換成root身分,再下ssh-copy-id -i ~/.ssh/id_rsa.pub sa@對方機器IP  -p808 (注意不要忘記了引數-i)
會把client端root下.ssh/id_rsa.pub檔附加到server端sa的主目錄下.ssh/authorized_keys

發表於 Linux系統 | 發表迴響