2024年Web前端最新分享一个开源免费、功能强大的视频播放器库，2024年最新面试官系列 前端

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

最近在开发一个前端项目，用到播放视频的功能，所以就查了下有什么前端的视频播放器库可以使用，今天来分享一下给大家。

这个库的名字叫做 Plyr，顾名思义其实就是 Player 的缩写，整体的预览效果如下：

官方网站：https://plyr.io/

GitHub 地址是：https://github.com/sampotts/plyr

看来一圈，发现这个库不仅美观优雅，而且功能十分丰富。

下面我们来介绍下它的一些内置功能。

总体概览

---

首先我们来看看它都支持什么功能，我们可以打开它的官方 Demo 网站，可以直接播放一个视频查看效果，如图所示：

整体看起来很不错，比浏览器自带的原生播放器看起来好看多了，各种控制条的 UI 都挺好看的。

接着我们来看看有什么功能。

进度条和音量控制就不说了。

接着看看右边还有什么，第一个是字幕控制：

这里可以通过点击来开启或者关闭字幕，也就是说，这个播放器是支持我们嵌入字幕文件的。

同时还支持很多设置，比如分辨率控制、播放速度控制：

其中播放速度控制还支持各种自定义速度，比如 1.25 倍、4 倍等等：

另外还支持视频画中画模式播放，只需要点击那个弹出按钮即可：

整体看来，这个官网的 Demo 就足以让我心动选择它了！

详细功能

---

但功能肯定不止这些，接下来我们再回到 GitHub 主页看看它的介绍，它的介绍如下：

• 📼 HTML 视频和音频、YouTube 和 Vimeo - 支持主要格式

• 💪 无障碍- 完全支持 VTT 字幕和屏幕阅读器

• 🔧 可定制- 我们可以自定义各种选项来让播放器呈现不同的 UI。

• 😎 干净的 HTML - 使用正确的元素，比如<input type="range"> 控制音量和使用<progress>控制进度。

• 📱 响应式- 适用于任何屏幕尺寸

• 💵 获利- 从您的视频中赚钱

• 📹 流式传输- 支持 hls.js、Shaka 和 dash.js 流式播放

• 🎛 API - 通过标准化 API 切换播放、音量、搜索等

• 🎤 事件- 不用搞乱 Vimeo 和 YouTube API，所有事件都是跨格式标准化的

• 🔎 全屏- 支持原生全屏并回退到“全窗口”模式

• ⌨️ 快捷键- 支持键盘快捷键

• 🖥 画中画- 支持画中画模式

• 📱 Playsinline - 支持playsinline属性

• 🏎 速度控制- 即时调整速度

• 📖 多个字幕- 支持多个字幕轨道

• 🌎 i18n 支持- 支持控件的国际化

• 👌 预览缩略图- 支持显示预览缩略图

• 🤟 没有框架- 用“vanilla” ES6 JavaScript 编写，不需要 jQuery

• 💁‍♀️ SASS - 包含在您的构建过程中

可谓是非常之强大了！

那这个具体怎么使用呢？下面我们再来介绍下。

使用

要使用 Plyr，可以直接引用 Plyr 的 CDN 文件，添加如下引用即可：

当然 Plyr 还支持 Node.js 项目直接引用，安装方式如下：

yarn add plyr

然后这样引用即可：

import Plyr from ‘plyr’;

const player = new Plyr(‘#player’);

Plyr 有一个非常强的功能，那就是它扩展了原生 HTML5 中 Media 相关标签的功能，比如我们现在可以给 video 标签添加一些自定义的功能，比如添加一个 data-poster 属性来当作视频预览封面，比如添加一个 track 标签来添加字幕文件，写法如下：

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

re optional -->

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-6zTVWI49-1715452683360)]