Artplayer播放器全开源带单页源码(播放器源代码)

Artplayer播放器全开源带单页源码(播放器源代码) 创建目录存放，如根目录的/static/player/artplayer 然后创建index.html将以下源代码放入保存即可。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-

创建目录存放，如根目录的/static/player/artplayer

然后创建index.html将以下源代码放入保存即可。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

    <meta name="renderer" content="webkit">

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <title>m3u8解析</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <script src="https://s4.zstatic.net/ajax/libs/hls.js/1.6.13/hls.min.js"></script>
    <script src="https://s4.zstatic.net/ajax/libs/artplayer/5.3.0/artplayer.js"></script>

    <style type="text/css">

        body,

        html,

        .artplayer-app {

            padding: 0;

            margin: 0;

            width: 100%;

            height: 100%;

            color: #aaa;

            background-color: #000;

        }



        a {

            text-decoration: none;

        }

    </style>

    <script type="text/javascript">var vid = window.location.href.split("url=")[1];</script>

</head>



<body>

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

    <script>
    if(typeof(parent.MacPlayer) !='undefined'){
			var videoUrl = parent.MacPlayer.PlayUrl;
			var next = parent.MacPlayer.PlayLinkNext;
		}

        function playM3u8(video, url, art) {

            if (Hls.isSupported()) {

                if (art.hls)

                    art.hls.destroy()

                const hls = new Hls()

                hls.loadSource(url)

                hls.attachMedia(video)

                art.hls = hls

                art.on('destroy', () => hls.destroy())

            }

            else if (video.canPlayType('application/vnd.apple.mpegurl')) {

                video.src = url

            }

            else {

                art.notice.show = 'Unsupported playback format: m3u8'

            }

        }

        const art = new Artplayer({

            container: '.artplayer-app',

            url: videoUrl,

            type: 'm3u8',

            volume: 0.5,

            autoplay: true,

            muted: false,  

            screenshot: true,

            setting: true,

            loop: false,

            flip: true,

            playbackRate: true,

            aspectRatio: true,

            fullscreen: true,

            fullscreenWeb: true,

            subtitleOffset: true,

            miniProgressBar: true,

            mutex: true,

            backdrop: true,

            playsInline: true,

            autoPlayback: true,

            airplay: true,

            lang: 'zh-cn',

            customType: {

                m3u8: playM3u8,

            },

        })

        art.on('ready', () => {

            console.info(art.hls)

        }) 

    </script>

</body>

</html>

调用方法，如图：

MacPlayer.Html='<iframe width="100%" height="'+MacPlayer.Height+'" src="/static/player/artplayer/index.html" frameborder="0" allowfullscreen="true" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>';MacPlayer.Show();