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>