學好WEB前端之媒體檔案規範

命名規範

命名全部用小寫英文字母、數字、 - 的組合，其中不得包含漢字、空格、特殊字元；儘量用易懂的詞彙, 便於團隊其他成員理解; 另, 命名如果需要分頭尾兩部分, 用-隔開, 比如 ad-left01.gif、 btn-submit.gif、page-video.mp4;

引入規範

使用相對路徑，不要指定資源所帶的具體協議 ( http:,https: ) ，除非這兩者協議都不可用。 推薦：

<img src="//reshw.ijunhai.com/public/img/normal.png" alt="圖片描述" >
<video src="//reshw.ijunhai.com/public/img/video.mp4" type="video/mp4"  muted autoplay="autoplay" loop="loop">

不推薦：

<img src="
<video src="

儲存位置（CDN）

使用 CDN 提供靜態檔案；CDN 不僅可以提升效能，也會為你管理檔案的壓縮和快取

web前端開發直播教程Q-q-u-n： 767273102 ，內有免費開發工具，零基礎，進階影片教程，希望新手少走彎路

圖片規範

圖片格式

常見的圖片格式有 GIF、PNG、JPEG、WebP、svg，根據圖片格式的特性和場景需要選取適合的圖片格式。

顏色較為豐富，檔案體積較大的圖片

• 優先考慮 JPEG 格式
• 條件允許的話優先考慮 WebP 格式
• 儘量不使用 PNG 格式，PNG8 色位太低，PNG24 壓縮率低，檔案體積大

顏色比較簡單、檔案體積不大、起修飾作用的圖片

• PNG 與 GIF 格式，優先考慮使用 PNG 格式，PNG 格式允許更多的顏色並提供更好的壓縮率
• 影像顏色比較簡單的，如純色塊線條圖示，優先考慮使用 PNG 格式，避免不使用 JPEG 格式
• 影像顏色豐富而且圖片檔案不太大的（40KB 以下）或有半透明效果的優先考慮 PNG 格式
• 需要良好的放縮體驗，需要動態控制圖片特效，相容 IE8 以上的，優先考慮 svg

小圖示（icon）

• 優先使用 iconfont。
• 使用 CSS Sprites，對於一些多色圖示和需要過渡動畫需用到雪碧圖，把圖示整合到一張大的圖片中，再利用 CSS 的背景定位來顯示需要顯示的圖片部分。

圖片大小

• PC 平臺單張的圖片的大小不應大於 200KB。
• 移動平臺單張的圖片的大小不應大於 100KB。

必須指定 alt 屬性

<img src="" alt="圖片描述" >

影片規範

影片格式

支援 HTML5 影片播放的瀏覽器支援 3 種影片格式 MP4, OGG 和 WebM,但並非所有的瀏覽器都支援 3 種。

影片大小

不超過 5M，如果影片過大，載入時間大於 1s，需要在頁面開始時加上 loading，防止頁面出現時間過慢，影響使用者體驗

video 標籤設定自動播放

瀏覽器一般不會再使用者不同意的情況下就播放出媒體聲音，這是不允許的，所以有聲音就不能自動播放，所以需要在新增 autoplay 屬性後再加上 muted，靜音播放。

推薦：

<video  controls="controls" muted autoplay="autoplay" loop="loop" >
  <source src="path-to-mp4.mp4" type="video/mp4" />
  <source src="path-to-webm.webm" type="video/webm" />
  <source src="path-to-ogv.ogv" type="video/ogg" />
  您的瀏覽器不支援 video 標籤。
</video>

插入外部影片方法選擇

影片作為背景

使用 video 標籤，並用在父集標籤上設定鋪滿整個可視範圍

頁面中嵌入影片（優先使用 iframe 標籤）

• 上傳到 cdn 上引用
• 可先在各大影片網站上上傳影片後引用

國內優酷影片：

<iframe height=498 width=510 src="

海外YouTube影片：

開啟Youtube影片，點選影片下方的“分享”，取到YouTubeID。

<!-- youtube影片播放後不出現推薦影片，配置引數rel=0，下列的PgHDnbWqFcc即為唯一id，每次只需替換掉該id即可 -->
<iframe id="player" frameborder="0" allowfullscreen="1" allow="encrypted-media" title="YouTube video player" src="