Uni-app 之h5播放m3u8格式的视频

一、安装插件

npm i dplayer -S npm i hls.js -S

二、代码示例

<template>
    <view class="content">
            <div id="dplayer" style="height: 450px; width: 800rpx;"></div>
        </view>
</template>

<script>
    //引入 hls与dplayer 用于解析播放视频 
    import Hls from 'hls.js'
    import Dplayer from 'dplayer'
    export default {
        data() {
            return {
                dp: {}
            }
        },
        mounted() {
            this.dp = new Dplayer({
                //播放器的一些参数
                container: document.getElementById('dplayer'),
                autoplay: false, //是否自动播放
                theme: '#FADFA3', //主题色
                loop: true,//视频是否循环播放
                lang: 'zh-cn',
                screenshot: false,//是否开启截图
                hotkey: true,//是否开启热键
                preload: 'auto',//视频是否预加载
                volume: 0.7,//默认音量
                mutex: true,//阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
                video: {
                    url: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', //视频地址
                    // url: 'http://boliu.hbzcyc.com/474975DDEFA/474975DDEFA.m3u8', //视频地址
                    type: 'customHls',
                    customType: {
                        customHls: function(video, player) {
                            const hls = new Hls()  //实例化Hls  用于解析m3u8
                            hls.loadSource(video.src)
                            hls.attachMedia(video)
                        }
                    },
                },
            });
        },
        created() {
 
        },
        methods: {
 
        }
    }
</script>


<style>

</style>

三、效果图

 

 参考网址：

1、https://blog.csdn.net/zxh7770/article/details/124102182?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-124102182-blog-125723574.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-124102182-blog-125723574.pc_relevant_default&utm_relevant_index=7

2、http://www.inner-peace.cn/blog/vue_dplayer_hls/