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

智雲程式設計發表於2019-06-29

命名規範

命名全部用小寫英文字母、數字、 - 的組合,其中不得包含漢字、空格、特殊字元;儘量用易懂的詞彙, 便於團隊其他成員理解; 另, 命名如果需要分頭尾兩部分, 用-隔開, 比如 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 不僅可以提升效能,也會為你管理檔案的壓縮和快取

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="http://player.youku.com/embed/XOTA1OTA2NjAw" frameborder=0 allowfullscreen></iframe>
學好WEB前端之媒體檔案規範

海外YouTube視訊:

開啟Youtube視訊,點選視訊下方的“分享”,取到YouTubeID。

學好WEB前端之媒體檔案規範
<!-- 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>



來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2649128/,如需轉載,請註明出處,否則將追究法律責任。

相關文章