uniapp项目引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频文件，文末有项目代码可供下载_uniapp hls

1.下载依赖

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

2.vue页面

<template>
	<view class="content">
		<div id="dplayer" style="height: 450px"></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://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8 ', //视频地址
					type: 'customHls',
					customType: {
						customHls: function(video, player) {
							const hls = new Hls()  //实例化Hls  用于解析m3u8
							hls.loadSource(video.src)
							hls.attachMedia(video)
						}
					},
				},
			});
		},
		created() {
 
		},
		methods: {
 
		}
	}
</script>

然后就可以运行uniapp项目了。 

Dplayer的一些常用的参数

uniapp 播放m3u8格式项目下载：uniappnpm引入Dplayer与hls解析播放m3u8格式视频_uniapp动态播放m3u8-编解码文档类资源-CSDN下载

---

 3. 2022年2月9日更新

有人私信问我Dplyer如何切换m3u8视频，我就在这里说一下。

刚开始我用官网的这个API方法以切换视频，但是很遗憾没有解决。

 于是，我便尝试用watch监听vuex中的视频源src，当视频源发生改变时，重新初始化 Dplyer示例。

<template>
	<view>
		<div class="video" id="dplayer" style="width: 750rpx; height: 450px"></div>
	</view>
</template>
 
<script>
	//导入hls与dplayer
	import Hls from 'hls.js'
	import Dplayer from 'dplayer'
	//引入vuex
	import { mapState } from 'vuex' 
	export default {
		data() {
			return {
				dp: {},//用于获取Dplayer方法，以便使用Dplayer的API
			}
		},
		computed:{
			...mapState(['m3u8Src'])//从vuex中获取视频源src
		},
		mounted() { //组件加载完成就第一次初始化Dplayer
			this.onInitDplayer(this.m3u8Src)
		},
		watch:{
			m3u8Src(n,o){//监听视频源src是否发生改变，若改变则重新初始化Dplayer
				this.onInitDplayer(this.m3u8Src)
			}
		},
		methods: {
			onInitDplayer(url) {
				this.dp = new Dplayer({
					//播放器的一些参数
					container: document.getElementById('dplayer'),
					autoplay: false, //是否自动播放
					lang: 'zh-cn',
					color: '#fadfa3',
					background: '#030307',
					preload: 'auto', //视频是否预加载
					volume: 0.7, //默认音量
					mutex: true, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
					video: {
						url, //视频地址
						type: 'customHls',
						customType: {
							customHls: function(video, player) {
								const hls = new Hls() //实例化Hls  用于解析m3u8
								hls.loadSource(video.src)
								hls.attachMedia(video)
							}
						},
					},
				});
				document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
				document.oncontextmenu = () => false; // 阻止页面所有右键事件
			}
		}
	}
</script>
 
<style>
	.video {
		width: 750rpx;
	}
</style>