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

如果觉得有收获请关注微信公众号 前端良文 每周都会分享前端开发中的干货知识点。