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>

var art = new Artplayer({
    container: '.artplayer-app', 
    // container: document.querySelector('.artplayer-app'),
    url: 'https://artplayer.org/assets/sample/video.mp4',
    id: 'your-url-id', // 只用于记忆播放
    poster: 'https://artplayer.org/assets/sample/poster.jpg', //视频的海报，只会出现在播放器初始化且未播放的状态下
    theme: '#23ade5', // 主题色
    volume: 0.7, // 默认音量
    autoplay: false,  // 自动播放
    autoSize: true, // 自动调整播放器尺寸以隐藏黑边
    autoMini: true, // 当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式
    // 设置面板
    setting: true, // 设置面板
    flip: true, // 显示视频翻转功能
    playbackRate: true, // 显示视频播放速度功能
    aspectRatio: true, // 显示视频长宽比功能

    screenshot: true, // 在底部控制栏里显示 视频截图 功能 提示由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败
    hotkey: true, // 使用快捷键
    pip: true, // 在底部控制栏里显示 画中画 的开关按钮
    pip: true, // 只能让一个播放器播放
    fullscreen: true, // 在底部控制栏里显示播放器 窗口全屏 按钮
    miniProgressBar: true, // 迷你进度条
    playsInline: true, // 移动端 playsInline 模式

    // 设置 预览图
    // 在线生成预览图
    // https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail

    thumbnails: {
        url: 'https://artplayer.org/assets/sample/thumbnails.png',
        number: 60,
        column: 10,
    },
    // 替换默认图标
    icons: {
        loading: '<img src="https://artplayer.org/assets/img/ploading.gif">',
        state: '<img width="150" heigth="150" src="https://artplayer.org/assets/img/state.svg">',
        indicator: '<img width="16" heigth="16" src="https://artplayer.org/assets/img/indicator.svg">',
    },
    lock: true, // 移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏
    fastForward: true, // 移动端添加长按视频快进功能
    autoOrientation: true,  // 是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器
    airplay: true, // 显示 airplay 按钮
});