105 lines
2.3 KiB
Vue
105 lines
2.3 KiB
Vue
<template>
|
|
<view class="h-full w-full">
|
|
<iframe class="w-full h-full" v-if="type=='iframe'" :src="url"></iframe>
|
|
<div ref="muiPlayer" v-else>
|
|
|
|
</div>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import 'mui-player/dist/mui-player.min.css'
|
|
import MuiPlayer from 'mui-player'
|
|
import Flv from 'flv.js'
|
|
import Hls from 'hls.js'
|
|
export default {
|
|
props: {
|
|
url: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
type: {
|
|
type: String,
|
|
},
|
|
},
|
|
mounted() {
|
|
this.videoPlayer()
|
|
},
|
|
methods: {
|
|
videoPlayer() {
|
|
if (this.type == 'iframe') {
|
|
console.log("=====");
|
|
} else {
|
|
let parse = {}
|
|
if (this.type == 'm3u8') {
|
|
parse = {
|
|
type: 'hls',
|
|
loader: Hls,
|
|
config: {
|
|
debug: false,
|
|
},
|
|
}
|
|
} else {
|
|
parse = {
|
|
type: 'flv',
|
|
loader: Flv,
|
|
config: {
|
|
debug: false,
|
|
},
|
|
}
|
|
}
|
|
this.mp = new MuiPlayer({
|
|
container: this.$refs.muiPlayer,
|
|
live: true,
|
|
src: this.url,
|
|
autoplay: true,
|
|
muted: true,
|
|
parse: parse,
|
|
pageHead: false,
|
|
width: '100%',
|
|
height: '100%',
|
|
autoFit: false,
|
|
objectFit: 'contain',
|
|
videoAttribute: [
|
|
{
|
|
attrKey: 'webkit-playsinline',
|
|
attrValue: 'webkit-playsinline',
|
|
},
|
|
{
|
|
attrKey: 'playsinline',
|
|
attrValue: 'playsinline',
|
|
},
|
|
{
|
|
attrKey: 'x5-video-player-type',
|
|
attrValue: 'h5-page',
|
|
},
|
|
],
|
|
custom: {
|
|
footerControls: [
|
|
{
|
|
style: {},
|
|
},
|
|
],
|
|
},
|
|
})
|
|
let _video = this.mp.video()
|
|
|
|
this.$nextTick(() => {
|
|
this.mp.on('ready', (event) => {
|
|
_video.play()
|
|
_video.addEventListener('play', (e) => {
|
|
//播放事件
|
|
this.$emit('onPlayFn')
|
|
})
|
|
_video.addEventListener('ended', (e) => {
|
|
//播放完成事件
|
|
this.$emit('onEndedFn')
|
|
})
|
|
})
|
|
})
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss"></style>
|