前端規範之媒體檔案規範

小婉發表於2019-06-21
前端

其他規範：

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>
複製程式碼

相關文章