Skip to main content

第三方库

简介​

  • 通过选项 customType 可以很容易的集成第三方的视频解码库，存在多个解码器时，你可以把他们都添加到 customType 里，解码库太大时，你还可以使用 js 动态导入

  • 播放器默认会解析出 url 选项的视频类型（如 m3u8, flv, mpd）, 假如无法解析出正确的视频类型时，你可以添加 type 选项指明视频类型

// 现在这个播放器可以同时播放: m3u8, flv, mpd
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');
        },
        flv: async function (video, url) {
            const { default: flvjs } = await import('flv.js');
        },
        mpd: async function (video, url) {
            const { default: dashjs } = await import('dash.js');
        },
    },
});

// 你可以切换新的视频地址
art.url = '/assets/sample/video-new.m3u8';

// 你还可以切换新的视频类型
art.type = 'flv';
art.url = '/assets/sample/video.flv';

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

假如使用了 customType，那么切换地址前，要销毁上一个解码器实例，否则会引起内存泄漏

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');

            // 切换地址前，要销毁上一个解码器实例
            if (hls) {
                hls.destroy();
            }

            // 播放器销毁时，也要销毁解码器实例
            art.on('destroy', () => {
                if (hls) {
                    hls.destroy();
                }
            });

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

// 切换新的视频地址
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 = '不支持播放格式：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 = '不支持播放格式：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;
});