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
• 截屏、弹幕

若是以为有收获请关注微信公众号 前端良文 每周都会分享前端开发中的干货知识点。