1.下载插件
cnpm install hls.js flv.js
导入项目
import Hls from 'hls.js'
import flvjs from 'flv.js'
使用
<script setup>
const player = ref(null)
const video = ref(null)
const videoRef = ref(null)
let flvPlayer = null
let flag = ref(true)
onUnmounted(() => {
let videosrc = ref("http://video.epaper.pybtv.cn:8080/live/rtmp_live_demo.flv")
flag.value = videosrc.value.includes(".m3u8")
gameScreenList.gameLivePlayFlag = false
if (flag.value) {
if (Hls.isSupported()) {
var hls = new Hls()
hls.loadSource(videosrc.value)
hls.attachMedia(video.value)
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.value.play()
})
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.value.src = videosrc.value
video.addEventListener('loadedmetadata', function () {
video.value.play()
})
}
} else {
flvPlayer = flvjs.createPlayer({
type: 'flv',
url: videosrc.value,
})
console.log('flvPlayer', flvPlayer)
flvPlayer.attachMediaElement(videoRef.value)
flvPlayer.load()
flvPlayer.play()
}
})
<script>
<template>
<!-- m3u8格式视频展示 -->
<video
ref="video"
class="videoElement"
autoplay
controls
muted
v-show="flag === true"
></video>
<!-- flv格式视频展示 -->
<video
ref="videoRef"
v-show="flag === false"
autoplay
muted
class="videoElement"
controls
></video>
</template>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71