一直想往前端流媒体方面研究,学习视频播放器 API 期间,断断续续的终于整体实现了一个简单的播放器,以及一些相关的插件、工具和组件。 之前在 v 站发过一次求测试,现在终于有一个相对稳定的版本,但兼容性问题还是有的,想大佬们继续帮忙测试一下。 其实写到一半才发现和其他播放器项目重名了,感觉悲催了。 详细功能的话好像也和其他播放器差不多,但在写的过程中发现和学习了一些好玩的东西,例如:
- Chrome 的画中画模式确实很方便
- 原来前端也可以把 srt 字幕转成 vtt 字幕直接使用
- 可以直接从视频生成 GIF,但很依赖网络情况:Demo
- 可以从视频帧中提取颜色样本,做出一张背光的效果:Demo
- 弹幕的优化主要在于怎么让弹幕尽量少的发生碰撞,要做到像 B 站那种效果确实还挺难的:Demo
- 前端也可以生成视频的预览图,对于简单的需求很方便,对于自动化场景还是要靠后端:Demo
- 对于没有弹幕库服务器的,可以使用 Github Issues Api 做弹幕库,但每小时最多五千请求,可以玩一下:Demo
var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
title: 'One More Time One More Chance',
poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
volume: 0.5,
isLive: false,
muted: false,
autoplay: false,
pip: true,
autoSize: true,
screenshot: true,
setting: true,
loop: true,
flip: true,
playbackRate: true,
aspectRatio: true,
fullscreen: true,
fullscreenWeb: true,
mutex: true,
theme: '#ffad00',
lang: navigator.language.toLowerCase(),
moreVideoAttr: {
crossOrigin: 'anonymous',
},
contextmenu: [
{
html: 'Custom menu',
click: function(contextmenu) {
console.info('You clicked on the custom menu');
contextmenu.show = false;
},
},
],
layers: [
{
html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
click: function() {
art.destroy(true);
art = new Artplayer({
autoplay: true,
container: '.artplayer-app',
url: url + '/video/your-name.mp4',
});
},
style: {
position: 'absolute',
top: '20px',
right: '20px',
opacity: '.9',
},
},
],
quality: [
{
default: true,
name: 'SD 480P',
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
},
{
name: 'HD 720P',
url: url + '/video/one-more-time-one-more-chance-720p.mp4',
},
],
thumbnails: {
url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
width: 190,
height: 107,
},
subtitle: {
url: url + '/subtitle/one-more-time-one-more-chance.srt',
style: {
color: '#03A9F4',
},
},
highlight: [
{
time: 60,
text: 'One more chance',
},
{
time: 120,
text: '谁でもいいはずなのに',
},
{
time: 180,
text: '夏の想い出がまわる',
},
{
time: 240,
text: 'こんなとこにあるはずもないのに',
},
{
time: 300,
text: '终わり',
},
],
controls: [
{
name: 'preview',
position: 'right',
html: 'OPEN',
mounted: $preview => {
art.plugins.localPreview.attach($preview);
},
},
],
icons: {
loading: '<img src="./assets/img/ploading.gif">',
state: '<img src="./assets/img/state.png">',
},
});