html 彙整

HTML vdieo 自動播放功能無法在 iOS (Safari) 中正常運行

by Rain Chu | 5 月 23, 2023 | web

如果要在 HTML 中播放影片，並且當作背景，一進來就自動播放，通常我們使用 video tag ，可以參考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video ，通常長得像是

<video autoplay poster="posterimage.jpg">
   <source src="video.mp4" type="video/mp4">
</video>

其中如果你要正常在各個瀏覽器中正常的「自動播放」，要加入 muted ，因為現在的瀏覽器的安全規範，都是只能自動播放無音軌的影片

<video autoplay muted poster="posterimage.jpg">
   <source src="video.mp4" type="video/mp4">
</video>

那很多人會發現，ios 上面的設備有問題，因為在 ios 上面還有自己的規範，https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari#3030250 ，主要就是講要加入 playsinline 屬性來定義影片的行為

<video autoplay muted playsinline poster="posterimage.jpg">
   <source src="video.mp4" type="video/mp4">
</video>

到此為止就都可以正常在各個設備上使用

Windows server IIS PHP Curl SSL Certificate 錯誤修正

by Rain Chu | 4 月 13, 2023 | Javascript, 程式

常常有需求要事後調整前台的畫面，尤其現在前端 javascript 的框架一大堆，只能事後處理，把元素的位置變來變去，我這邊舉利用 div 來代表，如何把元素變換位置，讓排版更簡單且容易些。

先準備有原來的 div

<div id="source">
  ....
</div>

想要把原來的Div移動到目的地的div，id 訂為 dest

<div id="dest">
  ....
</div>

JQuery 程式碼 appendTo()，把 div 移動到目的地 div 的裡面

$("#source").appendTo("#dest");

除了 appendTo() 最常用，還整理幾個常用的寫法，放在下面

$("#source").insertBefore("#dest");
$("#source").insertAfter("#dest");
$("#source").prependTo("#dest");
$("#source").appendTo("#dest");

參考資料

利用 javascript 以及 jquery 由前端網頁發送 email