The H5 of Uni-APP plays videos in M3U8 format

Install plug-ins

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

Code sample

    <view class="content">
            <div id="dplayer" style="height: 450px; width: 800rpx;"></div>
    //引入 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: '', //视频地址
                    // url: '', //视频地址
                    type: 'customHls',
                    customType: {
                        customHls: function(video, player) {
                            const hls = new Hls()  //实例化Hls  用于解析m3u8
        created() {
        methods: {


Leave a Reply

Your email address will not be published. Required fields are marked *