Web端视频播放器推荐

发表于 更新于 分类于
Web端视频播放器推荐

西瓜播放器

https://h5player.bytedance.com/guide/

西瓜视频播放器是一款由字节跳动开源的 Web 视频播放器。它基于组件化的原则设计了独立的、可拆分的 UI 组件。更重要的是，它不仅在 UI 层面上灵活，还在功能上进行了大胆的改进：它摆脱了对视频加载、缓冲和格式支持的依赖。尤其在处理 mp4 格式时，它可以进行分段加载，即使不支持流式传输的 mp4 格式也能实现无缝切换、加载控制和节省流量。它还集成了对 FLV、HLS 和 dash 格式的点播和直播支持。

安装

NPM方式

1
2
npm i -S xgplayer
npm i -S xgplayer-flv

使用

1
2
3
4
5
6
7
8
9
10
import Player from 'xgplayer'
import FlvPlugin from 'xgplayer-flv'
import "xgplayer/dist/index.min.css"

new Player({
    id:'dom-id',
    isLive: true,
    plugins: [FlvPlugin],
    url: 'test.flv',
})

CDN 方式

在 HTML 文件中加入如下代码。

1
2
3
<script src="//unpkg.com/xgplayer@latest/dist/index.min.js"></script>
<script src="//unpkg.com/xgplayer@latest/dist/index.min.css"></script>
<script src="//unpkg.com/xgplayer-flv@latest/dist/index.min.js"></script>

然后就可以直接在 window 上访问了。

1
2
3
4
5
6
7
<script>
new Player({
    id:'dom-id',
    isLive: true,
    plugins: [window.FlvPlayer]
})
</script>

示例

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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
  <meta name="referrer" content="no-referrer">
  <title>播放器</title>
  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
      margin: auto;
      overflow: hidden;
    }

    body {
      display: flex;
    }

    #mse {
      flex: auto;
    }
  </style>
  <link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.css">
  <script type="text/javascript">
    document.addEventListener('ready', () => {
      const resizeObserver = new ResizeObserver(() => {
        document.getElementById('mse').style.height = document.body.clientHeight + 'px'
      })
      resizeObserver.observe(document.body)
    })
  </script>
</head>

<body>
  <div id="mse"></div>
  <script src="//unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js" charset="utf-8"></script>
  <script src="https://unpkg.byted-static.com/xgplayer-flv/3.0.10/dist/index.min.js" charset="utf-8"></script>
  <script type="text/javascript">
    let player = new window.Player({
      id: 'mse',
      isLive: false,
      playsinline: true,
      url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv',
      autoplay: true,
      autoplayMuted: true,
      height: "100%",
      width: "100%",
      plugins: [window.FlvPlayer]
    });
    player.emit('resourceReady', [
      { name: '超清', definition: '1080p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv' },
      { name: '高清', definition: '720p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-480p.flv' },
      { name: '标清', definition: '480p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv' }
    ]);

  </script>
</body>

</html>

注意

自动播放只设置autoplay: true，现在的浏览器都会阻止自动播放，所以要添加上autoplayMuted: true。

DPlayer

https://dplayer.diygod.dev/zh/

这个播放器的优势是支持弹幕。

以 npm 为例，以及在 Vue.js 项目中使用：

1
npm install dplayer --save

Vue 页面中引入：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div id="video"></div>
</template>
<script>
import DPlayer from 'dplayer';
// ... 省略无关代码，初始化播放器
const dp = new DPlayer({
    container: document.getElementById('video'),
    video: {
        url: 'https:///xxx.xxxx.mp4', // 视频地址
    },
});
</script>