Artplayer.js - HTML5 视频播放器

╰+哭是因爲堅強的太久メ 2021-06-26 16:06 753阅读 0赞

一直想往前端流媒体方面研究，学习视频播放器 API 期间，断断续续的终于整体实现了一个简单的播放器，以及一些相关的插件、工具和组件。 之前在 v 站发过一次求测试，现在终于有一个相对稳定的版本，但兼容性问题还是有的，想大佬们继续帮忙测试一下。 其实写到一半才发现和其他播放器项目重名了，感觉悲催了。 详细功能的话好像也和其他播放器差不多，但在写的过程中发现和学习了一些好玩的东西，例如：

1.  Chrome 的画中画模式确实很方便
2.  原来前端也可以把 srt 字幕转成 vtt 字幕直接使用
3.  可以直接从视频生成 GIF，但很依赖网络情况:[Demo][]
4.  可以从视频帧中提取颜色样本，做出一张背光的效果:[Demo][Demo 1]
5.  弹幕的优化主要在于怎么让弹幕尽量少的发生碰撞，要做到像 B 站那种效果确实还挺难的:[Demo][Demo 2]
6.  前端也可以生成视频的预览图，对于简单的需求很方便，对于自动化场景还是要靠后端:[Demo][Demo 3]
7.  对于没有弹幕库服务器的，可以使用 Github Issues Api 做弹幕库，但每小时最多五千请求，可以玩一下:[Demo][Demo 4]

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">',
        },
    });

![在这里插入图片描述][20200710143635742.jpg]

[Demo]: https://artplayer.org/?libs=./uncompiled/artplayer-plugin-gif.js&example=gif
[Demo 1]: https://artplayer.org/?libs=./uncompiled/artplayer-plugin-backlight.js&example=backlight
[Demo 2]: https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku.js&example=danmuku
[Demo 3]: https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail.js&example=thumbnail
[Demo 4]: https://artplayer.org/?libs=./uncompiled/artplayer-tool-github.js%0A./uncompiled/artplayer-plugin-danmuku.js&example=github
[20200710143635742.jpg]: /images/20210626/3ac5224f6da54f62895068f2c24899fa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，753人围观）

还没有评论，来说两句吧...

相关阅读