zhw2590582 / artplayer

:art: ArtPlayer.js is a modern and full featured HTML5 video player

ArtPlayer.js

🎨 ArtPlayer.js is a modern and full featured HTML5 video player

・ Online Editor ・ API Document ・ 弹幕演示 ・ 更新记录 ・

Home Page

https://artplayer.org

Mobile Demo

Features

ArtPlayer.js is an easy-to-use and feature-rich HTML5 video player, and most of the player's functional controls support customization, which makes it easy to connect with your business logic. In addition, it directly supports .vtt, .ass and .srt subtitle formats. Integration with other dependencies such as flv.js, hls.js, dash.js, etc. is also very simple. The code is highly decoupled, the structure and logic are clear, and it is easy to track errors and add new features.

Install

Install with npm:

$ npm install artplayer

Or install with yarn:

$ yarn add artplayer

import Artplayer from 'artplayer';

Or umd build also available:

<script src="path/to/artplayer.js"></script>

Or from CDN:

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>

Will expose the global variable to window.Artplayer.

Usage

<div class="artplayer-app"></div>

var art = new Artplayer({
    container: '.artplayer-app',
    url: 'path/to/video.mp4',
});

Plugins

• artplayer-plugin-danmuku
• artplayer-plugin-ads (WIP)
• artplayer-plugin-iframe
• artplayer-plugin-hls-quality
• artplayer-plugin-dash-quality
• artplayer-plugin-vtt-thumbnail
• artplayer-plugin-multiple-subtitles
• artplayer-plugin-libass
• artplayer-plugin-chromecast
• artplayer-plugin-vast (WIP)
• artplayer-plugin-chapter

Libraries

• hls.js
• dash.js
• flv.js
• mpegts.js
• webtorrent.js

Proxys

• WebAV (WIP)
• libmedia (WIP)

Changelog

CHANGELOG_CN.md

Contributing

CONTRIBUTING.md

Donations

We accept donations through these channels:

• Patreon
• Paypal

QQ Group

License

MIT © Harvey Zack

artplayer's Issues

Missing option "isLive" in document

Hi I just found the option 'isLive' in packages/artplayer/types/artplayer.d.ts, but the document doesn't have this. It works well of course, but took me some time to find it. So you may update the document for easier usage.

Control Bar not hidding on mobile devices

Hello,
The player Control Bar is not hiding on mobile devices

Environment

• Browser: Chrome
• Version:
• Operating System: Android 9
• Version:

Theme color not used

I was trying to change the default background color which is initially black:

.art-video-player .art-video {
    background-color: #000;
}

I can of course override it with css but is there a recommended way to do it, maybe the theme option was intended to do this?
The doc doesn't stipulate what part of the player it affects. Besides the css var --theme is not used anywhere.

Sometimes video load fails and poster is not printed

Hi:

1. It's not happening always but sometimes I see the "Reconnect: 1" in the top left, and then the video is loaded (because the label dissapears). When this happens, the poster is not loaded correctly. The viewport stays black until you play the video.

2. Sometimes the Reconnect goes up to 5 ... and the video is not even loaded... I have the refresh the page (with SHIFT pressed, so maybe it's something about cache), in order to have the player working properly.
   Maybe is some debug information I can get to help ... maybe it's when there's some fail loading the mp4, I don't know.

引用js在h5加载不显示是什么原因

<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>

<script> var art = new Artplayer({ container: '.artplayer-app', url: '略', }); </script>

虽然是这么写了但是页面只有空白

Player styling - hide controls, customize buttons

I've gone through the documentation and couldn't find a way to hide all controls.

I'd like to have a muted/autoplay video that I can still pause.
On pause, only the big play button should show, then disappear when I click again.
Is there a way to do that in artplayer or should I directly hide controls via css ?

Is there a recommended way to override artplayer styles/icons ?
I'd like to modify the play button (and maybe other part of the player) which is rendered as art-icon art-icon-state and has a harcoded svg in artplayer.js.

Otherwise thanks for making artplayer, I'm loving the modular code structure and easy install in an es6/webpack project!

Hope multipart of flvjs can be supported.

Here is the multipart doc of flvjs. DPlayer can work with the code below, but ArtPlayer doesn't do.

DPlayer

new DPlayer({
    autoplay: true,
    container: document.querySelector('.player'),
    video: {
        type: 'customFlv',
        customType: {
            customFlv: function (video, player) {
                const flvPlayer = flvjs.createPlayer({
                    "type": "flv",
                    "duration": 1373161,
                    "segments": [
                        {
                            "duration": 333438,
                            "filesize": 60369190,
                            "url": "http://127.0.0.1/flv/7182741-1.flv"
                        }, {
                            "duration": 390828,
                            "filesize": 75726439,
                            "url": "http://127.0.0.1/flv/7182741-2.flv"
                        }, {
                            "duration": 434453,
                            "filesize": 103453988,
                            "url": "http://127.0.0.1/flv/7182741-3.flv"
                        }, {
                            "duration": 214442,
                            "filesize": 44189200,
                            "url": "http://127.0.0.1/flv/7182741-4.flv"
                        }
                    ]
                });
                flvPlayer.attachMediaElement(video);
                flvPlayer.load();
                player.on('destroy', function () {
                    flvPlayer.destroy()
                });
            },
        },
    },
})

Artplayer

new Artplayer({
    autoplay: true,
    container: '.player',
    customType: {
        flv: function (video) {
            const flvPlayer = flvjs.createPlayer({
                "type": "flv",
                "duration": 1373161,
                "segments": [
                    {
                        "duration": 333438,
                        "filesize": 60369190,
                        "url": "http://127.0.0.1/flv/7182741-1.flv"
                    }, {
                        "duration": 390828,
                        "filesize": 75726439,
                        "url": "http://127.0.0.1/flv/7182741-2.flv"
                    }, {
                        "duration": 434453,
                        "filesize": 103453988,
                        "url": "http://127.0.0.1/flv/7182741-3.flv"
                    }, {
                        "duration": 214442,
                        "filesize": 44189200,
                        "url": "http://127.0.0.1/flv/7182741-4.flv"
                    }
                ]
            });
            flvPlayer.attachMediaElement(video);
            flvPlayer.load();
        }
    }
})

Loads the URL although the video is not played

Hi!
I use ArtPlayer to show 10 videos on page, all of them with the "poster" variable.
But I see each time I load the page, it requests to the server the 10 poster url's AND ALSO the 10 mp4 files.
So that's a lot of data transfer consuming, because the user probably will see just 1 or 2 videos.
Is there any option to disable this, so ArtPlayer request the mp4 video mp4 just if user plays it ?

弹幕发送功能

我在弹幕插件中没有找到弹幕发送的功能，请问有这方面的计划吗？

我写了一个Dplayer的弹幕服务器，想适配给ArtPlayer，但是并没有找到弹幕发送接口，现在不知道接口应该设计哪些参数，目前Bilibili弹幕代理已经完成了，目前可以返回xml格式的弹幕给ArtPlayer，但是不知道怎么接收从ArtPlayer发送的弹幕

Add custom header support

When playing a video or m3u8 with hls.js, is it possible to add customer headers along with GET requests? like referer and token headers for verification.

字幕为什么无法显示呢?

为什么srt字幕无法加载显示呢??
win10下用的chrome浏览器. 显示srt字幕, 看chrome里的警告是 Resource interpreted as TextTrack but transferred with MIME type text/plain: "http://127.0.0.1/Imitationgame/The.Imitation.Game.2014.BluRay.720p.chs_eng.srt"
导入的是artplayer.css和artplayer.js文件.
用下面教程的方法显示的字幕.
var art = new Artplayer({
container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
subtitle: {
url: url + '/subtitle/one-more-time-one-more-chance.srt',
style: {
color: '#03A9F4',
},
},
});

Add safari support?

Look like the artplayer not working on and IOS. Keep loading all the time.

Not find any event to see the updated time of art player

Hey @zhw2590582 ,
Please suggest me i need an event that call every sec when the time of player has been changing but i didn't see any event like this. Please tell me what i need to do in this scenario.

Thanks,

Screenshot button not working in react version

Expected behaviour

A window shows up to select where the file should be saved.

Actual behaviour

Nothing happens on the demo page.
On a personal project, I can the following message in the top :

Steps to reproduce

Open demo page using chrome: https://codesandbox.io/s/n74859y9rl?file=/src/index.js
Click on the screenshot button.

This button works under firefox.

Environment

• Browser: Google Chrome
• Version: Version 83.0.4103.61 (Official Build) (64-bit)
• Operating System: Ubuntu
• Version: 18.04

Console errors (if any)

Link to where the bug is happening

试图同时支持flv与dash格式的播放失败。

我试图让播放器在不销毁的情况下同时支持dash与flv，通过修改type来实现无效。是否能支持切换呢。

另外
文档中的 art.url 和 art.switchUrl 有什么区别呢。

音量键快速向右滑动时直接静音的改善

你好，我发现当我要快速放大音量时，这时候鼠标会脱出音量调控区域，然后音量就会静音，麻烦改善这一项问题。谢谢。必要时候我会提供分支。这款播放器真的不错

playsinline support?

when I run artplayer web page in iOS, I found it always plays in fullscreen mode. If its possible to support playsinline mode?

can i include more than one subtitles?

can i include more than one subtitles?

How to include subtitles but start the video with them disabled?

I have subtitles successfully setup, but I need to disable them as default, so if user wants it, (s)he has to click in the subtitle icon.

How can I do it?
Thank you !

Google Drive Video

Can i open video from google drive in ArtPlayer.js?

Uncaught ArtPlayerError: The width and height of the container cannot be 0

Actual behaviour

Uncaught ArtPlayerError: The width and height of the container cannot be 0

Steps to reproduce

Tried with the basic setup and html markup.

Environment

• Browser: chrome
• Version: 80.0.3987.132
• Operating System: windows
• Version: 8.1

Console errors (if any)

Uncaught ArtPlayerError: The width and height of the container cannot be 0

[Feature Request] modify this.option.poster to update video poster

I want to change the cover after the video loads by artplayer-vue.

I try this.option.poster = "xxx" or this.art.option.poster = 'xxx', but failed.
But i can use this.art.player.url = "xxx" to change video src.

I check the source code, it seems that poster is not treated like urlMix.

Can you add this feature?

Then we can just use this.option.poster to change video poster.

hls format doesnt work on IOS

Expected behaviour

在 iphone X 上用 safari 来播放m3u8格式，也引入了hls.js，但并不能播放，桌面端可以。
手机段 console 没有任何出错信息。
如果通过whitelist允许用复杂界面，出现 “vt.on is not a function" 这个错误

Actual behaviour

Steps to reproduce

Environment

• Browser:
  safari
• Version:
• Operating System:
  IOS
• Version:
  12

Console errors (if any)

vt.on is not a function

Link to where the bug is happening

Not an issue

I don't know why it has just 200 stars but it's the best open source video player i've found for web yet.
So many useful features, great UI and lots of plugins.
Really great work! @zhw2590582
Thank you

字幕条裁剪

语音识别后的字幕一行字数太多，需要能功能是：可以在轨道上把字幕条裁开一分为二。

Js not loading on Mobile devices

Expected behaviour

Am building a player to look exactly like the demo and the js is not loading when the site is visited using mobile devices

Actual behaviour

The player looks like the default video for html5. The player is hosted on Test Site
The player works well on browser but not on mobile

Steps to reproduce

The minimal code link is Minimal code

Environment

• Browser: Chrome 83
• Version:
• Operating System: Android 9
• Version:

Console errors (if any)

None

Link to where the bug is happening

感觉打开设置和鼠标右键界面的时候视频会变得更清晰一些

上图是没打开的时候

Mobile Player

Hello,

How can I show ArtPlayer on Mobile rather than the native player?

Thanks

引用hls 播放插件的时候不能自动播放

您好，

• Browser:
  google
• Version:
  3.4.2
• Operating System:
  mac os
• Version:
  这是我的代码片段：
  customType: { m3u8: function(video, url) { var hls = new Hls(); hls.loadSource(url); hls.attachMedia(video); }, }, autoplay: true, //自动播放

autoplay: true 失效；我不知道这是一个BUG还是在hls 里配置？如果是在HLS 里，请提供相应的属性给我，非常感谢。

vue如何监听各个事件

您好，这个demo过于简单，我想知道怎么去监听播放器事件呢？

请问如何不销毁播放器重新加载新的弹幕库

我在不销毁播放器的情况下切换视频地址，需要同时切换弹幕库。
请问如何切换。
我尝试使用

art.plugins.artplayerPluginDanmuku.config({
            danmuku: '/assets/sample/danmuku.xml',
            speed: 5,
            maxlength: 50,
            margin: [10, 100],
            opacity: 1,
            fontSize: 25,
            synchronousPlayback: false,
        });

来切换，danmuku似乎不起作用，其他参数可以被改变。

另外我想询问关于控件单个按钮隐藏的具体用法，以实现播放器窗口较小的情况下隐藏部分按钮。

WebVtt format is supported but ArtPlayer writes the "-" in the beginning of each line

As you can see here
https://developer.mozilla.org/en/docs/Web/API/WebVTT_API

WebVtt format writes a new line starting with "-"

This dash should not be printed in subtitles.

Safari can't fire playing event after seeked

Expected behaviour

如下图，当 Chrome 视频处于播放状态，seeked 事件之后，可以触发 playing 事件：

Actual behaviour

如下图，当 Safari 视频处于播放状态，seeked 事件之后，无法触发 playing 事件：

Steps to reproduce

1. 打开 Safari 前往 https://artplayer.org
2. 播放视频
3. 拖曳时间轴
4. 确认 Console 的 video: seeked 事件之后，应该出现 video: playing 事件

Environment

• Browser: Safari
• Version: 13.1
• Operating System: macOS
• Version: 10.15.4

Console errors (if any)

Link to where the bug is happening

https://artplayer.org

如下图，原先以为是 Safari 对视频事件的实作有问题，但是试了一下，原先的 Safari video 在 seeked 之后，可以触发 playing 事件：

How to override default language on setting panel?

Beside changing source code directly, is a way to override setting name shown in english to another language?

Google Cloud Storage

I have link from google cloud storage, but not play

Is this link : https://storage.googleapis.com/hippomu/37984/1/37984_2.mp4

my link can run in video.js but not run in artplayer.js why?

Add support for screenshot working on cross-origin domain vide source.

if the Vue app hosted example.com, and video source from another domain name streaming.example.com.

In this case screenshot will throw exceptions

This can be solved by adding crossorigin attribute with value of anonymous

<video class="art-video" crossorigin="anonymous" preload="auto" src="https://streaming.example.com/video/0"><track default="" kind="metadata"></video>

应该有个播放速度功能

看主流播放器都有0.5,0.75,1,1.25.1.5,2倍速播放的功能, 不知道这个实现起来难度如何. 如果倍速播放的话,字幕和弹幕是否还能很好适配也是个问题.

Getting ArtPlayerError: The width and height of the container cannot be 0

Expected behaviour

Should render the player

Actual behaviour

Throws error
The width and height of the container cannot be 0

Steps to reproduce

use ` in a React component in a condition like:
(even if wrapping into a container with defined fixed width and height)

function Wrapper() {
  if (someThin) return <div>other thing</div>
  return (
    <ArtplayerComponent
        option={{
            url: editingAsset.asset.attributes.url,
            theme: '#acadee',
            volume: 0.5,
            muted: false,
            autoplay: false,
            setting: true,
        }}
    />
  )
}

Environment

Mac OS Catalina 10.15.5

• Browser: Google Chrome
• Version: 83
• Operating System: Mac OS
• Version: Catalina 10.15.5

Package versions

• "react": "^16.13.1",
• "react-dom": "^16.13.1",

Console errors (if any)

artplayer-react.js:8 Uncaught ArtPlayerError: The width and height of the container cannot be 0

speed to 0.25

Hello, can you add to ArtPlayer a new speed value of 0.25 also? that's useful in some cases when a video is fast byself. Thanks.

seeking is not working under Safari browser.

Expected behaviour

Once the user clicks on the play button, I programmatically move the cursor to make the video playing from a predefined time.

Actual behaviour

Under Safari, the code part responsible for moving the cursor doesn't work.
The same code works under Firefox and Chrome.

Steps to reproduce

I'm actually using the following code

        <ArtplayerComponent
          key={url}
          option={option}
          style={{
            width: `${width}px`,
            height: `${height}px`,
          }}
          getInstance={instance => {
            if (!!t)
              instance.seek = t
            instance.on('pause', () => onSeekOrPause(instance.currentTime))
            instance.on('seek', () => onSeekOrPause(instance.currentTime))
            instance.on('ready', () => onReady(instance))
          }}
        />

The following part is responsible for moving the cursor. t is the time from which the video should start.
if (!!t) instance.seek = t

Environment

• Browser: Safari
• Operating System: Mac Os

Console errors (if any)

N/A

Link to where the bug is happening

N/A

ArtPlayer React not support in Nextjs

This is a very attractive player, but still not supported in NextJs. I'm still confused to solve it

NextJS : Latest
ArtPlayer : 3.5.14

how to solve this?
Should I use a third party package?
Thanks

一个ArtPlayer可以用的弹幕服务器

我写了一个弹幕服务器，在前一段时间适配了ArtPlayer的弹幕系统，可以加入到ArtPlayer的生态吗？

相关API文档

请问我如何使用js控制播放器

我在使用React，但是ref拿到的instance没有原生的pasue()以及play()，只能使用原生的js进行控制，请问是否有解决办法呢？谢谢

弹幕库为空时，加载出错。

Expected behaviour

Actual behaviour

Steps to reproduce

Environment

• Browser:
• Version:
• Operating System:
• Version:

Console errors (if any)

Link to where the bug is happening

加载B站弹幕库，没有弹幕的时候，控制台报错。
不影响使用，建议增加判断。

请问没有关闭弹幕显示的功能吗

文档与实例里好像都没有写关闭弹幕显示

全屏时可以隐藏底部控制栏吗?

现在点全屏时, 控制栏还是会在底部一直显示.
有没有什么属性设置, 可以在全屏时自动隐藏控制栏,
鼠标移动时再显示出来, 等几秒后再自动隐藏, 就和其他播放器的全屏时控制那样.

您好，我的播放器经常会降级为原生播放器请问会是什么原因呢？

When you start the video programatically the video:play method is not triggered

I don't know if this is a bug or I must accomplish it in other way.

When I want to play the video through Javascript I use this:

art_object.player.play = true;

But this does not trigger the "video:play" event.

The "video:play" event is just triggered when I press the PLAY button in the player (or if it's pauses, anyplace in the player as usual to resume the video)

My question... after setting the .on('video:play'... method ... how can I play the video externally and trigger that method ?

请问如何更改清晰度里的地址。

我在创建播放器后添加了一个清晰度选项，然后尝试在切换url以后通过 art.option.quality 更新清晰度选项。
清晰度列表依然是原视频的地址。

多个instance会导致浏览器崩溃

Expected behaviour

同时有多个video在同一页面不会崩溃

Actual behaviour

多个art video在同一页面开启preload会导致浏览器崩溃

请问如何在preload为none的情况下不让art player进入loading状态，现在preload为none会一直loading(只能使用css覆盖掉原有的元素样式)，谢谢

Steps to reproduce

Environment

• Browser:Chrome
• Version: 87
• Operating System: Mac OS
• Version: 10.15

Console errors (if any)

Link to where the bug is happening