html中 DPlayer 播放m3u8文件【方式二】

最新推荐文章于 2024-08-22 10:02:18 发布

Q_Q 忙里偷闲

最新推荐文章于 2024-08-22 10:02:18 发布

阅读量5.9k

点赞数 1

分类专栏： # html5&css3 专栏文章标签： html 前端 DPlayer m3u8

本文链接：https://blog.csdn.net/qq_36410795/article/details/127258454

版权

html5&css3 专栏专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1. 播放效果

在这里插入图片描述

2. init页面播放文件代码

通过 iframe 的src 方式嵌入播放的页面，m3u8播放地址通过参数传入

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport"
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
        <meta name="referrer" content="never">
        <title>m3u8</title>
    </head>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <body>
        <iframe
            src="./video.html?hlsUrl=http://live3.jogyhg.com/live/jr7owi3l160igq0_03c0e113e94d32ce48a8e5b0a791ce24.m3u8"
            width="500px" height="50%"></iframe>
    </body>
</html>

3. video页面 m3u8播放文件

需要引入第三方文件 DPlayer.min.js，hls.js，flv.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="referrer" content="never">
    <title>m3u8</title>
</head>
<style>
    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #dplayer {
        width: 100%;
        height: 100%;
    }
    .dplayer-controller-mask,
    .dplayer-controller,
    .dplayer-mobile-play,
    .dplayer-notice-list {
        display: none !important;
    }
</style>

<body>
    <div id="dplayer"></div>
</body>
<script src="./DPlayer.min.js"></script>
<script src="./hls.js"></script>
<script src="./flv.js"></script>
<script>
	// 对地址进行解析
    let url = location.href.split('?hlsUrl=')[1].replace('http:', '').replace('https:', '')
    let dp = new DPlayer({
        container: document.getElementById("dplayer"),
        live: true,
        autoplay: true,
        preload: 'auto',
        volume: 0,
        hotkey: false,
        lang: 'en',
        video: {
            url: url,
            type: 'customHls',
            customType: {
                customHls: function (video, player) {
                    const hls = new Hls();
                    hls.loadSource(url);
                    hls.attachMedia(video);
                },
                customFlv: function (video, player) {
                    const flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url,
                    });
                    flvPlayer.attachMediaElement(video);
                    flvPlayer.load();
                },
            },
        },
    });
    dp.on('playing', () => {
        dp.volume(1)
        window.top.postMessage('playing');
        document.getElementById('dplayer').setAttribute('style', 'pointer-events:none')
    })
    dp.on('canplay', () => {
        dp && dp.paused && dp.play()
    })
    window.addEventListener("message", function (event) {
        dp && dp.paused && dp.play()
    })
</script>
</html>