前端規範之媒體文件規範

其餘規範：

HTML 規範

CSS 規範

javascript 規範

nodeJs 規範

vue項目規範

命名規範

命名所有用小寫英文字母、數字、 - 的組合，其中不得包含漢字、空格、特殊字符；儘可能用易懂的詞彙, 便於團隊其餘成員理解; 另, 命名若是須要分頭尾兩部分, 用-隔開, 好比 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="http://reshw.ijunhai.com/public/img/normal.png" alt="" >
<video src="http://reshw.ijunhai.com/public/img/video.mp4" type="video/mp4" muted autoplay="autoplay" loop="loop">
複製代碼

存儲位置（CDN）

使用 CDN 提供靜態文件；CDN 不只能夠提高性能，也會爲你管理文件的壓縮和緩存

圖片規範

圖片格式

常見的圖片格式有 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="http://player.youku.com/embed/XOTA1OTA2NjAw" frameborder=0 allowfullscreen></iframe>
複製代碼

海外YouTube視頻：

打開Youtube視頻，點擊視頻下方的「分享」，取到YouTubeID。

<!-- youtube視頻播放後不出現推薦視頻，配置參數rel=0，下列的PgHDnbWqFcc即爲惟一id，每次只需替換掉該id便可 -->
<iframe id="player" frameborder="0" allowfullscreen="1" allow="encrypted-media" title="YouTube video player" src="https://www.youtube.com/embed/PgHDnbWqFcc?rel=0&enablejsapi=1&widgetid=1"></iframe>
複製代碼