note

This article was last updated on August 28, 2023, 1 year ago. The content may be out of date.

ArtPlayer is a modern and fully-featured HTML5 video player that is very easy to use. In this post we show several examples how to customize it to better suit our needs.

Schedule a Pause

Sometimes we want to pause a video after some time has passed. We can use an input html element to enter the amount of the time after which the video will pause. However, we can sort of hack it as an ArtPlayer setting.

note

ArtPlayer supports 3 types of control: selector list, switch button, range slider. The official document has examples for each of them.

Although not stated, we infer from the icon parameter that we can pass an html element as a string to the html field of the setting. And because switch button has an actual button that we can click on, we can use an input element to enter the duration we want to watch a video.

// declare a custom setting when initializing an artplayer instance
const art = new Artplayer({
    settings:[
        {
            html: '<input id="timeout">',
            icon: 'time',
            switch: false,
            onSwitch: function (item, $dom, event) {
                if (event.target !== timeout) timeoutSwitch()
                return item.switch;
            },
        }
    ]
    // omit the rest
})

const timeout = document.getElementById('timeout');

function timeoutSwitch() {
    clearInterval(interval)
    let value = parseTime(timeout.value.trim()) * 60
    interval = setInterval(function () {
        if (value <= 0) {
            art.pause()
            clearInterval(interval)
        } else --value
    }, 1000)
}

By hacking a switch button setting, we can create an input element that can take user inputs. Unlike using an outside input element, this even works in full screen with minimum intrusion.

Playlist

We can use a control with a list of selectors to implement a playlist. Clicking a selector to trigger the corresponding video to play is easy enough, but how about once a video ended, play the next video if there is one?

It turns out it’s quite simple. Since we can reference a setting using its name, and the active selector has a class .art-current, it’s quite trivial:

const current = art.controls[`${name of the control}`].querySelector('.art-current')
current.nextSibling?.click()
// so we can see the selector entry for the current video when we open up the control.
current.nextSibling?.scrollIntoView({behavior: 'smooth'})

Double Tap to Forward/Backward for Mobile

YouTube mobile has a handy feature that allows for double tap to forward/backward. We can accomplish this using layer.

const art = new Artplayer({
    // only shows how to double tap on the left third of the screen to backward
    // for brevity
    layers:[
        {
            html: '',
            style: {
                position: 'absolute',
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                width: '33%',
                height: '100%',
            },
            disable: !Artplayer.utils.isMobile,
            click: function () {
                if (ldb.dblclick()) art.backward = Artplayer.SEEK_STEP;
            },
        }
    ]
    // omit the rest
})

class doubleClick {
    dblclick() {
        const now = Date.now();
        const result = this.timestamp && now - this.timestamp <= Artplayer.DBCLICK_TIME;
        this.timestamp = now;
        return result;
    }
}

const ldb = new doubleClick();