【js】video-js常用功能整理

video.js 常用功能配置

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>video.js - roc</title>
    <link rel="stylesheet" href="https://unpkg.com/video.js@8.10.0/dist/video-js.min.css" />
  </head>
  <body>
    <div class="wrap">
      <!-- 设置了视频宽高比例 aspectRatio: "16:9" video需要自适应 16：9 -->
      <div style="width: 1024px">
        <video style="width: 100%" class="video-js" id="my-player"></video>
      </div>
      <!-- 状态显示 -->
      <div>
        <p>视频总长: <span id="duration"></span></p>
      </div>
      <!-- 操作 -->
      <div style="margin-top: 10px">
        <button onclick="player.play()">播放</button>
        <button onclick="player.pause()">暂停</button>
        <!-- currentTime方法 获取到的是秒数；传参也需要是秒数 -->
        <button onclick="player.currentTime(player.currentTime() + 5)">快进5秒</button>
        <button onclick="player.currentTime(player.currentTime() - 5)">后退5秒</button>
        <button onclick="player.volume(player.volume() + 0.05)">加大音量(+5)</button>
        <button onclick="player.volume(player.volume() - 0.05)">减小音量(-5)</button>
        <!-- volume方法 获取到的是 0-1之间的小数；传参也需要是 0-1之间的小数 -->
        <button onclick="player.volume(0.5)">设置音量50</button>
        <button onclick="player.muted(true)">静音</button>
        <button onclick="player.muted(false)">关闭静音</button>
        <button onclick="changePlayerM3u8()">切换m3u8</button>
        <button onclick="changePlayerMp4()">切换mp4</button>
        <button onclick="player.requestFullscreen()">全屏</button>
        <button onclick="player.exitFullscreen()">退出全屏</button>
        <button onclick="player.load(); player.play()">重新加载</button>
        <button onclick="player.dispose()">销毁（会删除video标签）</button>
      </div>
    </div>
    <script src="https://unpkg.com/video.js@8.10.0/dist/video.min.js"></script>
    <script src="https://unpkg.com/video.js@8.10.0/dist/lang/zh-CN.js"></script>

    <script>
      /**
       * 以下列举出常用的 video.js 配置
       * 全部配置参考：
       * 中文：https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/docs/guides/options.html
       * 英文：https://videojs.com/guides/options
       */
      const player = videojs(
        "my-player",
        {
          // width: 1024,
          // height: 576,
          // 设置语言（需要引入对应的 lang.js）
          language: "zh-CN",
          // 视频宽高比例如：16:9 4:3 需要配合 video标签 外层标签设置宽度使用
          aspectRatio: "16:9",
          // 控制条
          controls: true,
          // 自动播放属性 false true muted play any 开启自动播放推荐使用 any
          autoplay: false,
          // 静音
          muted: false,
          // 循环播放
          loop: false,
          // 封面图
          poster: "https://rocyuan666.gitee.io/img/rocyuan.jpg",
          // 预加载 auto metadata none 一般推荐 auto
          preload: "auto",
          // video标签 的 source标签 type（MIME类型）: video/mp4 video/webm video/ogg application/x-mpegURL
          sources: [
            // {
            //   src: "https://cfss.cc/api/ysp/cctv1.m3u8",
            //   type: "application/x-mpegURL",
            // },
            {
              src: "https://rocyuan666.github.io/assets/%E3%80%90%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8%E3%80%91code-generator-VAR/1.mp4",
              type: "video/mp4",
            },
          ],
        },
        function () {
          videojs.log("播放器准备完成~");

          console.log(this.muted());

          /**
           * 事件监听
           */
          this.on("error", (error) => {
            videojs.log("播放错误", error);
          });

          this.on("stalled", () => {
            videojs.log("网速异常");
          });

          this.on("play", () => {
            videojs.log("开始播放");
          });

          this.on("playing", () => {
            videojs.log("不论什么原因（刚开始播放、转跳后播放等...场景）每次播放都会触发一次，播放中...");
          });

          this.on("pause", () => {
            videojs.log("暂停播放");
          });

          this.on("ended", () => {
            videojs.log("播放结束");
          });

          this.on("seeking", () => {
            videojs.log("视频跳转中");
          });

          this.on("seeked", () => {
            videojs.log("视频跳转结束");
          });

          this.on("ratechange", () => {
            videojs.log("播放速率改变");
          });

          this.on("timeupdate", () => {
            videojs.log("播放时间变化", this.currentTime());
          });

          this.on("volumechange", () => {
            const volume = Number((this.volume() * 100).toFixed(0));
            videojs.log("播放音量变化（包括静音设置）", volume);
            videojs.log("是否静音", this.muted());
          });

          this.on("fullscreenchange", () => {
            videojs.log("是否全屏", this.isFullscreen());
          });

          this.on("loadstart", () => {
            videojs.log("开始请求数据");
          });

          this.on("loadedmetadata", () => {
            videojs.log("获取资源长度完成 ");
            document.getElementById("duration").innerHTML = player.duration() + " 秒";
          });

          this.on("progress", () => {
            videojs.log("正在请求数据...");
          });

          this.on("canplaythrough", () => {
            videojs.log("视频源数据加载完成");
          });

          this.on("waiting", () => {
            videojs.log("等待数据");
          });

          // 移除事件监听
          // this.off("play", () => {});
          // ...
        }
      );

      /**
       * 切换m3u8
       */
      function changePlayerM3u8() {
        player.src([
          {
            src: "https://rocyuan666.github.io/assets/%E3%80%90%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8%E3%80%91code-generator-VAR/1.m3u8",
            type: "application/x-mpegURL",
          },
        ]);
        player.play();
      }

      /**
       * 切换mp4
       */
      function changePlayerMp4() {
        player.src([
          {
            src: "https://rocyuan666.github.io/assets/%E3%80%90%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8%E3%80%91code-generator-VAR/1.mp4",
            type: "video/mp4",
          },
        ]);
        player.play();
      }
    </script>
  </body>
</html>

文档参考：

https://videojs.com/guides/options

https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/docs/guides/options.html