最近贵树发现了一个可以在博客，视频网站用的视频播放器——ArtPlayer。
ArtPlayer.js 是一款现代化、功能完备的 HTML5 视频播放器，由 Harvey Zack 开发。它致力于提供卓越的用户体验，并具备高度可定制性。
特点和功能
- 全功能：支持多种视频源和字幕格式，内置丰富的默认控件。
- 高度可定制：几乎所有控件都支持自定义，轻松接入业务逻辑。
- 轻量高效：优化过的代码库，体积小，加载快，性能出色。
- 易用性强：简单明了的 API 文档，快速上手，易于维护。
如何使用
CDN
这个简单，引入`
<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>然后像这样
const art = new Artplayer({
container: '.artplayer-app',
url: 'path/to/video.mp4',
});在body区域，添加div元素
<html>
<head>
<title>ArtPlayer Demo</title>
<meta charset="UTF-8" />
<style>
.artplayer-app {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div class="artplayer-app"></div>
</body>
</html>于是，你就可以在网页简单播放视频了
使用Vue
npm install artplayer
Areplayer.vue
<template>
<div ref="artRef"></div>
</template>
<script>
import Artplayer from "artplayer";
export default {
data() {
return {
instance: null,
};
},
props: {
option: {
type: Object,
required: true,
},
},
mounted() {
this.instance = new Artplayer({
...this.option,
container: this.$refs.artRef,
});
this.$nextTick(() => {
this.$emit("get-instance", this.instance);
});
},
beforeDestroy() {
if (this.instance && this.instance.destroy) {
this.instance.destroy(false);
}
},
};
</script>app.vue
<template>
<Artplayer @get-instance="getInstance" :option="option" :style="style" />
</template>
<script>
import Artplayer from "./Artplayer.vue";
export default {
data() {
return {
option: {
url: "path/to/video.mp4",
},
style: {
width: "600px",
height: "400px",
margin: "60px auto 0",
},
};
},
components: {
Artplayer,
},
methods: {
getInstance(art) {
console.info(art);
},
},
};
</script>其他
可以在开发者网站自行查询
添加功能
这时虽然有播放器了，但此时不能用更多的功能，比如全屏视频
像这样，添加以下代码即可，具体指的是哪些内容可以在网上查询
const art = new Artplayer({
container: '.test',
url: '3.mp4',
isLive: false,
screenshot: true,
setting: true,
flip: true,
playbackRate: true,
aspectRatio: true,
fullscreen: true,
subtitleOffset: true,
miniProgressBar: true,
mutex: true,
backdrop: true,
playsInline: true,
autoPlayback: true,
airplay: true,
})添加对m3u8（HLS）的支持
可以引入`
<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.5.14/hls.js"></script>
````
然后像这样
const art = new Artplayer({
container: '.artplayer-app',
url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
type: 'm3u8',
customType: {
m3u8: playM3u8,
},
isLive: false,
muted: false,
autoplay: false,
pip: true,
autoMini: true,
screenshot: true,
setting: true,
flip: true,
playbackRate: true,
aspectRatio: true,
fullscreen: true,
fullscreenWeb: true,
subtitleOffset: true,
miniProgressBar: true,
mutex: true,
backdrop: true,
playsInline: true,
autoPlayback: true,
airplay: true,
});
function playM3u8(video, url, art) {
if (Hls.isSupported()) {
if (art.hls) art.hls.destroy();
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
art.hls = hls;
art.on('destroy', () => hls.destroy());
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
} else {
art.notice.show = 'Unsupported playback format: m3u8';
}
}
---
再打开浏览器，就会发现播放器支持m3u8（HLS）流媒体的播放了
### 后记
这样的能含弹幕的播放器还有很多，大家可以根据页面的美观度、业务需求来进行选择
### GitHub 地址
[zhw2590582/ArtPlayer: :art: ArtPlayer.js is a modern and full featured HTML5 video player (github.com)](https://github.com/zhw2590582/ArtPlayer)