JiangNingUmale-h5/subcontract/work/videocenter/video.vue

<template>
	<view class="video-main">
		<view :id="'mui-player' + id"></view>
	</view>
</template>

<script>
	import MuiPlayer from 'mui-player';
	import Hls from 'hls.js'
	export default {
		data() {
			return {
				videos:null,
				player:null,
			};
		},
		props:{
			src:{
				type:String,
				default:""
			},
			id:{
				type:Number,
				default:0,
			}
		},
		methods:{
			initVideo(){
				this.$nextTick(()=>{
				  // 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
				  this.player = new MuiPlayer({
					  container:document.getElementById("mui-player" + this.id),
					  src:'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8',
					  parse:{
						  type:'hls',
						  loader:Hls,
						  config:{ // hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
							  debug:false,
						  },
					  },
					  pageHead:false,
				  });
			    })
			},
		},
		mounted() {
			this.initVideo()
		}
	}
</script>

<style lang="scss">
.video-main {
	width: 100%;
	height: 100%;
	.video {
		width: 100%;
		height: 100%;
	}
}
</style>