xgplayer中的知識點

以前的一篇文章中講了xgplayer中的插件模式和批量導入功能的使用，
今天再來看一下里面還有什麼知識點是咱們平時開發的時候能夠借鑑的。

HTML自定義元素

首先咱們來看一下xgplayer播放器在頁面上的dom結構

這些以xg-開始的元素不是HTML的標準元素，第一眼看到的話，覺得是webcomponent的自定義元素，好比下面這樣來實現：

class XGControls extends HTMLElement {
  constructor() {
    super();
  }
}
window.customElements.define('xg-controls', XGControls);

可是看了源碼之後發現不是，這就是直接往頁面上插入的自定義元素，好比：

parent.appendChild(document.createElement('xg-controls'));

我以前是沒有見到過這種用法，瀏覽器是會保留用戶的自定義元素，而且dom元素也是HTMLElement的實例，只是沒有任何的默認行爲和樣式，因此display屬性也要本身顯示的設置，好比display: block。

查到這麼一句話：

「User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.」

這麼作有什麼好處呢？ 我想到有兩點吧，第一點是語義化，能夠根據功能自定義元素的名稱，不然將都是div。第二點是不會被其餘全局樣式影響，若是用div，使用該組件的頁面上寫個
div {display: none !important;}，就會被覆蓋。

元素排序

上圖是播放器的控制條，控制條中有不少功能元素，其中一部分是要在左側顯示，好比 開始暫停，一部分在右側顯示，好比全屏，最後的要求是這些元素要有固定的顯示順序，可是dom元素的排列是能夠無序的。

這裏的實現第一，利用了flex佈局中的order屬性，數值越小，排列越靠前，默認爲0。因此元素的顯示順序按照order值排序，而與dom元素的順序無關，第二，中間的空白是利用了一個佔位的xg-placeholder元素 設置flex:1把左右元素撐開。

svg圖標

xgplayer中使用的圖標都是用的都是svg格式,可能平時需求開發中，咱們大部分都是用UI給的切圖作成雪碧圖，小的圖作成base64格式。這種小的圖標用svg相比於base64的優勢是清晰度高和體積小，有一些在線網站能夠生成svg代碼，項目中配置raw-loader就可處理，因此有合適的場景能夠進行使用。

視頻內旋轉

由於視頻和圖片比較類似，而圖片比較經常使用，因此講一下這個功能。先來看下視頻內旋轉功能的效果，旋轉前

旋轉後

若是問別人怎麼作視頻內旋轉的話，你們都會說用css3的transform rotate就能夠了，但旋轉更關鍵還有縮放比例的計算，看上圖若是旋轉以後的視頻不縮小的話確定就超出了原有的dom元素範圍。

首先咱們來看一下黑色的邊框是怎麼出現的？css中有一個object-fit屬性，該屬性是控制元素的內容應該如何去適應指定容器高度與寬度。
經常使用的三個屬性值：

• fill img的默認值，不保證保持原有的比例，內容拉伸填充整個內容容器。
• contain video的默認值，保持原有尺寸比例。內容被縮放。
• cover 保持原有尺寸比例。但部份內容可能被剪切。

視頻用默認的contain保持視頻的寬高比, 而後父元素的背景色設黑色。好比上圖中容器的尺寸是 400✖️200，視頻的尺寸是1280✖️720, 400/200 > 1280/720 因此保持視頻寬高比，容器左右會有留黑，同理若是 尺寸的寬高比小於視頻的寬高比則上下會有留黑。

<div style="width:400px; height: 200px; background: #000">
    <video style="width: 100%; height: 100%"></video>
</div>

接着來看怎麼肯定旋轉時的縮放比例，能夠發如今旋轉先後雖然有留黑到那時都至少有一個邊是和容器的尺寸相同的，再根據視頻是按比例縮放的，因此其實咱們能夠算出縮放先後的視頻真實顯示的尺寸，而後取其中一個邊計算比例便可。

還以上面的數據爲例，旋轉前視頻的高度和容器相同是p1 = 200，而後再看旋轉後的尺寸，從旋轉後的方向看容器是200✖️400 < 1280✖️720, 因此是上下留黑，視頻的寬度是200，根據視頻比例計算高度p2=200✖️720/1280=112.5, 旋轉的縮放比例是scale = p2/p1= 0.5625。

其餘可借鑑的功能

整體說 xgplayer在接口層面對video的屬性和事件進行了封裝，在UI層面完成了播放器的經常使用功能，同時保證了擴展性。而後下面列出一些功能，平時開始中若是遇到能夠進行參考xgplayer的實現。

• 瀏覽器全屏的兼容寫法
• 下載用到的downloadjs
• 畫中畫拖拽元素的draggabilly
• 截屏、彈幕

若是以爲有收穫請關注微信公衆號 前端良文 每週都會分享前端開發中的乾貨知識點。