网页播放 .m3u8 视频文件

最新推荐文章于 2024-08-22 06:34:27 发布

七个包

最新推荐文章于 2024-08-22 06:34:27 发布

阅读量1.5w

点赞数 1

分类专栏：前端文章标签： m3u8

原文链接：https://wenhairu.com/Tencent-CDN-Access.html

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1,使用 dplayer,官网上有例子

<link href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script>
<div id="dplayer"></div>
<script>
    const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: '这个放你自己的视频文件.m3u8',
        type: 'customHls',
        customType: {
            customHls: function(video, player) {
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
            },
        },
    },
});
</script>

2,用的是阿里云的对象储存服务,结果访问的时候报错了,是跨域问题