灵犀工坊
灵犀
2021-10-21

前端播放器 学习整理

# 前端播放器 学习整理

# 简介

视频播放时项目中资源视频播放比较重要的功能，在移动端使用原生 播放播放，PC端使用的是video 标签。目前需求时，取代移动端视频原生播放，同时具有定制化能力，已经拥有良好的跨平台能力。 目前比较流行的前端播放video.js 等众多js 播放器，针具目前需求重要学习 video.js 和 xgplayer （西瓜播放器）。

# video.js

  • VideoJS 是最流行的 HTML5 视频播放器，免费、开源，可使用 CSS 轻松定制皮肤，支持全屏，在不支持的浏览器自动切换为 Flash 播放。
# 安装
  $ npm install --save-dev video.js
1
# 版本的支持

v7 版本已经不支持 IE11， 包括 IE8、9、10。 微软在两年前就放弃了对这些版本的支持，人们普遍认为这些版本不符合现代安全标准，它们只占Video.js浏览器使用量的不到0.1%。

# 自定义

使用video.js 可以定制化。 插件和皮肤可以完全定制自己的播放器。

aspect ratio 纵横比 playbackRates 播放速率

# 皮肤 （skinning）

skin 完全是由HTML 和 CSS构建的， 可以简单改变 播放按钮也可以 复杂的创建全新的布局。

-- home page Themes (主页 主题) 主页中的主题来自Videojs主题库。 要在播放器中使用它们，请导入CSS，然后将相关类添加到视频标签中。 例如，如果你想使用City主题，你可以像这样设置你的HTML:

<!-- Video.js base CSS -->
<link
  href="https://unpkg.com/video.js@7/dist/video-js.min.css"
  rel="stylesheet"
/>

<!-- City -->
<link
  href="https://unpkg.com/@videojs/themes@1/dist/city/index.css"
  rel="stylesheet"
/>

<!-- Then, in the player -->
<video class="video-js vjs-theme-city" ...></video>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 建议用css 联级简单的覆盖想要定制的设计部分
# 插件 （Plugins）

video.js 本事非常简单，它支持基本的视频和音频播放功能。如果想扩展更多功能的话可以使用 plugins,可以扩展功能。

# 移动端适配

为防止IOS点播放自动进入全屏，需添加两个属性：

playsinline = true
webkitPlaysinline = true
1
2
# controlBar组件的说明
playToggle, //播放暂停按钮
volumeMenuButton,//音量控制
currentTimeDisplay,//当前播放时间
timeDivider, // '/' 分隔符
durationDisplay, //总时间
progressControl, //点播流时，播放进度条，seek控制
liveDisplay, //直播流时，显示LIVE
remainingTimeDisplay, //当前播放时间
playbackRateMenuButton, //播放速率，当前只有html5模式下才支持设置播放速率
fullscreenToggle //全屏控制
1
2
3
4
5
6
7
8
9
10
# 默认组件树

Video.js播放器的默认组件结构如下所示：

Player 播放器

├── MediaLoader (has no UI) 媒体加载

├── PosterImage 海报图片

├── TextTrackDisplay 文本轨道显示

├── LoadingSpinner 加载旋转器

├── BigPlayButton 大播放按钮

├─┬ ControlBar 控制条

│ ├── PlayToggle 播放切换

│ ├── VolumeMenuButton 声音菜单按钮

│ ├── CurrentTimeDisplay (hidden by default) 当前播放时间

│ ├── TimeDivider (hidden by default) 时间分割器

│ ├── DurationDisplay (hidden by default) 持续播放时间

│ ├─┬ ProgressControl (hidden during live playback) 进度条控制

│ │ └─┬ SeekBar 拖动条

│ │ ├── LoadProgressBar 加载进度条

│ │ ├── MouseTimeDisplay 鼠标时间显示

│ │ └── PlayProgressBar 播放进度条

│ ├── LiveDisplay (hidden during VOD playback) 直播显示

│ ├── RemainingTimeDisplay 剩余时间

│ ├── CustomControlSpacer (has no UI) 自定义控制间隔

│ ├── PlaybackRateMenuButton (hidden, unless playback tech supports rate changes) 播放速率菜单按钮（隐藏，除非回放技术支持速率变化）

│ ├── ChaptersButton (hidden, unless there are relevant tracks) 章节按钮（隐藏，除非有相关轨道）

│ ├── DescriptionsButton (hidden, unless there are relevant tracks) 说明按钮（隐藏，除非有相关轨道）

│ ├── SubtitlesButton (hidden, unless there are relevant tracks) 字幕按钮

│ ├── CaptionsButton (hidden, unless there are relevant tracks) 标题按钮

│ ├── AudioTrackButton (hidden, unless there are relevant tracks) 音频轨道按钮

│ └── FullscreenToggle 全屏切换

├── ErrorDisplay (hidden, until there is an error) 错误（隐藏，直到发生错误）

└── TextTrackSettings 文本轨道设置 支持

  • videojs 4.9开始支持
# video.js 的监听方法
 this.player = videojs(
        this.$refs.audioPlayer,
        this.audioOptions,
        function onPlayerReady () {
          console.log('onPlayerReady', this)
          this.on("loadstart", function () {
            console.log("开始请求数据 ");
          })
          this.on("progress", function () {
            console.log("正在请求数据 ");
          })
          this.on("loadedmetadata", function () {
            console.log("获取资源长度完成 ")
          })
          this.on("canplaythrough", function () {
            console.log("视频源数据加载完成")
          })
          this.on("waiting", function () {
            console.log("等待数据")
          });
          this.on("play", function () {
            console.log("视频开始播放")
          });
          this.on("playing", function () {
            console.log("视频播放中")
          });
          this.on("pause", function () {
            console.log("视频暂停播放")
          });
          this.on("ended", function () {
            console.log("视频播放结束", that.playState);
            if (that.playState === '2') {
              that.i++;
              if (that.i >= that.options.sources.length) {
                that.i = 0;
              }
              this.currentPlay();
            } else {
              this.play();
            }
          });
          this.on("error", function () {
            console.log("加载错误")
          });
          this.on("seeking", function () {
            console.log("视频跳转中");
          })
          this.on("seeked", function () {
            console.log("视频跳转结束");
          })
          this.on("ratechange", function () {
            console.log("播放速率改变")
          });
          this.on("timeupdate", function () {
            console.log("播放时长改变", that.playState);
          })
          this.on("volumechange", function () {
            console.log("音量改变");
          })
          this.on("stalled", function () {
            console.log("网速异常");
          })
        }
      )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
# video js 调用方法
this.player.currentTime()  // 获取当前播放的时间
this.player.duration()   // 获取当前播放的总时长
this.player.play() // 播放
this.player.pause() // 暂停
1
2
3
4

# xgplayer (西瓜播放器)

西瓜播放器是一个Web视频播放器类库，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。更重要的是它不只是在 UI 层有灵活的表现，在功能上也做了大胆的尝试：摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力，让本不支持流式播放的 mp4 能做到分段加载，这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时，它也集成了对 flv、hls、dash 的点播和直播支持。

# xgplayer 自定义样式

命令行输入npx xgplayer eject [targetDir] [skinName]实现将播放器样式相关代码复制到指定相对路径[targetDir]下的.xgplayer/skin文件夹中，然后就可以任意修改实现自定义样式了。[skinName]为自定义样式名

https://v2.h5player.bytedance.com/generate/

# video.js 与 西瓜对比
  1. video.js 文档是英文，学习成本较高， 西瓜为中文版文档上手较快
  2. xgplayer npm 包大小 比 video 较小
  3. 都可以播放音频，都有对应的皮肤，和自定义播放，都有插件配置
  4. video.js api 更多，更详细，可定制化更强
  5. github start 对比 video.js 31.8k vs 西瓜 4.2k
  6. 使用方面 video.js 有 600000 网站在用， 有良好的兼容性， xgplayer 是除了字节产品外，也有网易百度等产品使用

综上来看，如果是时间有限，节约开发成本，可以考虑使用西瓜播放器， 如果追求深度定制化（包括 UI、插件等）可以考虑使用 video.js

# 需要继续学习 探讨
  1. 高度 的UI自定制 （video skin component）
  2. 播放器 手势（拖动 音量进度 亮度）
  3. 播放器横竖屏切换
# 参考文档
  • http://chimee.org/docs/chimee_plugin_usage.html
  • 西瓜播放器 https://github.com/bytedance/xgplayer xgplayer-music 音频播放器 demo 在线 https://v2.h5player.bytedance.com/examples/
  • MediaElementJS http://www.mediaelementjs.com/
  • https://github.com/videojs/video.js
  • https://videojs.com/getting-started/#customize
  • https://github.com/core-player/vue-core-video-player vue 定制
  • https://codepen.io/heff/pen/wtrHL video js 定制
  • https://github.com/surmon-china/vue-video-player
  • https://feater.top/normal/539/

# 音频

https://openbase.com/js/vue-audio https://github.com/kolber/audiojs

# https://www.jianshu.com/p/3dd13c221e3d

路由加密

https://segmentfault.com/q/1010000012155019 关注微信公众账号

多页面 router history https://segmentfault.com/a/1190000040032442

git config --global http.sslVerify "false" git config --global --unset http.proxy git config --global --unset https.proxy

编辑
上次更新: 2021/11/09, 09:11:45
最近更新
01
MongoDB
 02-07
02
TypeScrpt学习
 02-07
03
前端部署
 11-18
更多文章>
Theme by Vdoing | Copyright © 2015-2023 Evan Xu | MIT License
×