artplayer.js是一款功能齐全支持弹幕图层、hls多码率、生成gif的现代HTML5视频播放器-BFW插件库

artplayer.js是一款功能齐全支持弹幕图层、hls多码率、生成gif的现代HTML5视频播放器

特性

支持vtt和srt字幕

支持视频质量切换

支持自定义控件、层、上下文菜单、设置

支持播放速率、纵横比、翻页、窗口全屏或网络全屏调整

支持与其他依赖项的集成，如：flv.js、hls.js、dash.js、shaka player、webtorrent

支持图片模式下的chrome本地图片，或图片模式下的自定义图片

支持缩略图并在进度条中突出显示

支持保持原始视频比例、自适应大小

支持丰富的自定义事件监控，易于扩展

支持控制国际化

支持自定义插件

支持本地视频预览

支持字幕时间偏移

支持屏幕截图

使用方式：

第一步引入bfwone

第二步use插件及css和主题css

第三步配置参数

<script type="text/javascript">
    var art = new Artplayer({
        container: '.artplayer-app',//容器
        url: '//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4',//视频地址
        title: 'One More Time One More Chance',//标题
        poster: '//repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png',//封面
        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,//是否网页全按钮
        subtitleOffset: true,
        miniProgressBar: true,//mini模式按钮
        localVideo: true,//本地视频
        localSubtitle: true,//本地字幕
        networkMonitor: false,//网络监控
        autoPip: true,
        mutex: true,
        backdrop: 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="//repo.bfw.wiki/bfwrepo/icon/5df8727d0f153.png">`,
            click: function() {
                console.info('You clicked on the custom layer');
            },
            style: {
                position: 'absolute',
                top: '20px',
                right: '20px',
                opacity: '.9',
            },
        },
        ],//视频码率
        quality: [{
            default: true,
                name: 'SD 480P',
                url: '//repo.bfw.wiki/bfwrepo/video/5d8741d7df44b.mp4',
            },
            {
                name: 'HD 720P',
                url: '//repo.bfw.wiki/bfwrepo/video/5d8741d7df44b.mp4',
            },
        ],
            thumbnails: {
                url: '//repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png',
                number: 100,
                width: 160,
                height: 90,
                column: 10,
            },
            // 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: [{
                position: 'right',
                html: 'Control',
                click: function() {
                    console.info('You clicked on the custom control');
                },
            },
            ],
            // icons: {
            //     loading: '<img src="./assets/img/ploading.gif">',
            //     state: '<img src="./assets/img/state.png">',
            // },
        });

    </script>

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone"  type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["artplayer", "artplayer"], function() {
               // var url = 'https://zhw2590582.github.io/assets-cdn';
                var art = new Artplayer({
                    container: '.artplayer-app',
                    url:   '//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4',
                    title: 'One More Time One More Chance',
                    poster:   '//repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png',
                    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,
                    subtitleOffset: true,
                    miniProgressBar: true,
                    localVideo: true,
                    localSubtitle: true,
                    networkMonitor: false,
                    autoPip: true,
                    mutex: true,
                    backdrop: 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="//repo.bfw.wiki/bfwrepo/icon/5df8727d0f153.png">`,
                        click: function() {
                            console.info('You clicked on the custom layer');
                        },
                        style: {
                            position: 'absolute',
                            top: '20px',
                            right: '20px',
                            opacity: '.9',
                        },
                    },
                    ],
                    quality: [{
                        default: true,
                            name: 'SD 480P',
                            url:   '//repo.bfw.wiki/bfwrepo/video/5d8741d7df44b.mp4',
                        },
                        {
                            name: 'HD 720P',
                            url:  '//repo.bfw.wiki/bfwrepo/video/5d8741d7df44b.mp4',
                        },
                    ],
                        thumbnails: {
                            url:  '//repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png',
                            number: 100,
                            width: 160,
                            height: 90,
                            column: 10,
                        },
                        // 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: [{
                            position: 'right',
                            html: 'Control',
                            click: function() {
                                console.info('You clicked on the custom control');
                            },
                        },
                        ],
                        // icons: {
                        //     loading: '<img src="./assets/img/ploading.gif">',
                        //     state: '<img src="./assets/img/state.png">',
                        // },
                    });

                });
            });
        </script>
  
    </head>
    <body>
       <div class="artplayer-app" style="width:100%;height:300px;"></div>
    </body>
</html>