參考網址:https://steachs.com/archives/39467
手機中安裝android messages app
右上角找到「訊息網頁版」
電腦開啟https://messages.google.com/web
用手機掃瞄QRCODE即可使用電腦發送簡訊
參考網址:https://steachs.com/archives/39467
手機中安裝android messages app
右上角找到「訊息網頁版」
電腦開啟https://messages.google.com/web
用手機掃瞄QRCODE即可使用電腦發送簡訊
參考網址:程式前沿
文中提及共有四種不同的方法可以實現
第四種方法不錯喔!節錄如下:
第一種方法,也是最簡單的方法是錨點用<a>標籤,在href屬性中寫入DIV的id。如下:
<!DOCTYPE html> <html> <body> <h2> <a href="#div1">to div1</a> <a href="#div2">to div2</a> <a href="#div3">to div3</a> </h2> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </body> </html>
這種方法的缺點是點選錨點之後,瀏覽器的URL會發生變化,如果重新整理可能會出現問題。
第四種方法是用js的srollIntoView方法,直接用:
document.getElementById("divId").scrollIntoView();
這種方法的好處,是URL不會變,同時能夠響應相應的scroll事件,不需要演算法什麼的。
參考網址: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 資料刪除,重新啟動。就可以重新設定密碼了。
參考網址:wibibi
HTML img title 與 img alt 的範例
<img src="#" alt="圖片失效就顯示這段文字" style="border:1px black solid;"> <img src="圖片網址" title="滑鼠移上來就看得到文字" style="border:1px black solid;">
參考網址:
是否可以在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%; }
參考網址: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介紹
文章目录:
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音頻
<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>
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/