乐趣区

关于javascript:xgplayer中的知识点

jiezi

之前的一篇文章中讲了 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
  • 截屏、弹幕

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

退出移动版