Skip to main content

Third party librarys

Overview​

  • With the option customType, it is easy to integrate third-party video decoding libraries. When there are multiple decoders, you can add them to customType. When the decoding library is too large, you can also use js to dynamically import

  • By default, the player will parse the video type of the url option (such as m3u8, flv, mpd). If the correct video type cannot be parsed, you can add the type option to indicate the video type

// Now this player can play: m3u8, flv, mpd
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.m3u8',
    type: 'm3u8', // Optional, but it is better to fill in
    customType: {
        m3u8: async function (video, url) {
            const { default: Hls } = await import('hls.js');
        },
        flv: async function (video, url) {
            const { default: flvjs } = await import('flv.js');
        },
        mpd: async function (video, url) {
            const { default: dashjs } = await import('dash.js');
        },
    },
});

// You can switch to a new video address
art.url = '/assets/sample/video-new.m3u8';

// You can also switch new video type
art.type = 'flv';
art.url = '/assets/sample/video.flv';

art.type = 'mpd';
art.url = '/assets/sample/video.mpd';
Tip

If customType is used, the previous decoder instance must be destroyed before switching url, otherwise memory leakage will occur

var hls = null;
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.m3u8',
    type: 'm3u8',
    customType: {
        m3u8: async function (video, url) {
            const { default: Hls } = await import('hls.js');

            // Destroy the last decoder instance before switching url
            if (hls) {
                hls.destroy();
            }

            // When the player is destroyed, the decoder instance must also be destroyed
            art.on('destroy', () => {
                if (hls) {
                    hls.destroy();
                }
            });

            hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(video);
        },
    },
});

// Switch to a new video address
art.url = '/assets/sample/video-new.m3u8';

flv.js​

▶ Run Code
var art = new Artplayer({
    container: '.artplayer-app',
    autoplay: true,
    url: '/assets/sample/video.flv',
    customType: {
        flv: function (video, url) {
            if (flvjs.isSupported()) {
                const flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    url: url,
                });
                flvPlayer.attachMediaElement(video);
                flvPlayer.load();
            } else {
                art.notice.show = 'Does not support playback of flv';
            }
        },
    },
});

hls.js​

▶ Run Code
var art = new Artplayer({
    container: '.artplayer-app',
    autoplay: true,
    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    customType: {
        m3u8: function (video, url) {
            if (Hls.isSupported()) {
                const hls = new Hls();
                hls.loadSource(url);
                hls.attachMedia(video);
            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                video.src = url;
            } else {
                art.notice.show = 'Does not support playback of m3u8';
            }
        },
    },
});

dash.js​

▶ Run Code
var art = new Artplayer({
    container: '.artplayer-app',
    autoplay: true,
    url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
    customType: {
        mpd: function (video, url) {
            var player = dashjs.MediaPlayer().create();
            player.initialize(video, url, true);
        },
    },
});

shaka-player​

▶ Run Code
var art = new Artplayer({
    container: '.artplayer-app',
    autoplay: true,
    url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
    customType: {
        mpd: function (video, url) {
            shaka.polyfill.installAll();
            var player = new shaka.Player(video);
            player.load(url);
        },
    },
});

webtorrent​

▶ Run Code
var art = new Artplayer({
    container: '.artplayer-app',
    autoplay: true,
    url: 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',
    type: 'torrent',
    customType: {
        torrent: function (video, url, art) {
            var client = new WebTorrent();
            art.loading.show = true;
            client.add(url, function (torrent) {
                var file = torrent.files[0];
                file.renderTo(video, {
                    autoplay: true,
                });
            });
        },
    },
});

art.on('ready', () => {
    art.template.$video.controls = false;
});