Artplayer.js - HTML5 视频播放器

╰+哭是因爲堅強的太久メ 2021-06-26 16:06 812阅读 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 条评论，812人围观）

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

相关阅读

相关 html制作在线视频音乐播放器,JS+html5制作简单音乐播放器

dio.paused)\{ audio.play(); \} \} var btn2 = document.getElementById("btn-stop"); b

谁践踏了优雅/ 2022年10月05日 12:47/ 0 赞/ 281 阅读

相关基于HTML5的视频播放器

之前在上网去搜索播放器的时候，很多都要收费的，不收费的感觉看起来很费劲，所以自己简单些了一下，前几天有共享过一个简单的H5视频播放器，但是存在一些BUG，最近修复了一下，再次共

墨蓝/ 2022年09月21日 04:56/ 0 赞/ 267 阅读

相关 HTML5视频播放器插件

[下载地址][Link 1]ckin是一款界面漂亮的HTML5视频播放器插件。该视频播放器内置有三种皮肤，并且允许你修改控制按钮的颜色，遮罩层透明度和视频封面等。参数配置：da

旧城等待，/ 2022年09月10日 14:22/ 0 赞/ 339 阅读

相关 html5视频播放器

html5 视频音频制作学习的笔记，记录备忘。效果图： ![Center][] 代码： <!DOCTYPE html> <ht

绝地灬酷狼/ 2022年08月19日 08:59/ 0 赞/ 335 阅读

相关 HTML5 播放器

暂存一些HTML5播放器的资料，慢慢消化. [使用 HTML5 技术播放视频][HTML5] [使用 Clear Key 加密 MP4 视频并播放][Cle

布满荆棘的人生/ 2022年07月12日 07:28/ 0 赞/ 226 阅读

相关 HTML5 播放器

暂存一些HTML5播放器的资料，慢慢消化. [使用 HTML5 技术播放视频][HTML5] [使用 Clear Key 加密 MP4 视频并播放][Cle

た入场券/ 2022年07月12日 07:28/ 0 赞/ 264 阅读

相关 H5视频播放器

<!doctype html> <html> <head> <meta charset="utf-8"> <title>视频</title> <link h

淡淡的烟草味﹌/ 2022年04月22日 13:40/ 0 赞/ 371 阅读

相关 video.js分段自动加载视频【html5视频播放器】

突发奇想的需求，要在官网上放一个一个半小时的视频教程…… 然而，加载成了问题，页面是cshtml的.net混合网站，不知道哪儿的限制，导致视频加不出来。没有办法，只能前端

墨蓝/ 2021年12月20日 05:47/ 0 赞/ 1264 阅读

相关 html视频播放器（video）

视频解码器 H.264 Throra VP8 音频解码器 AAC MP3 Ogg 1.视频标准 video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP

矫情吗；*/ 2021年10月29日 14:58/ 0 赞/ 576 阅读

相关 Artplayer.js - HTML5 视频播放器

一直想往前端流媒体方面研究，学习视频播放器 API 期间，断断续续的终于整体实现了一个简单的播放器，以及一些相关的插件、工具和组件。之前在 v 站发过一次求测试，现在终于有一

╰+哭是因爲堅強的太久メ/ 2021年06月26日 16:06/ 0 赞/ 813 阅读