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
72
73
| <template>
| <div id="video-box">
| <video id="hlsVideo" ref="hlsVideo" controls preload="true"></video>
| </div>
| </template>
|
| <script>
| import Hls from 'hls.js'
| export default {
| name: 'playVideo',
| data () {
| return {
| hls: ''
| }
| },
| methods: {
| destroyHls: function () {
| if (this.hls) {
| this.$refs.hlsVideo.pause()
| this.hls.destroy()
| this.hls = null
| }
| },
| loadVideoFn: function () {
| if (Hls.isSupported()) {
| this.hls = new Hls()
| this.hls.loadSource('http://171.34.197.243:786/devimages/streaming/examples/bipbop_4x3/gear2/prog_index.m3u8') // CCTV1直播源
| this.hls.attachMedia(this.$refs.hlsVideo)
| this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
| console.log('加载成功')
| this.$refs.hlsVideo.play()
| })
| this.hls.on(Hls.Events.ERROR, (event, data) => {
| // console.log(event, data);
| // 监听出错事件
| console.log('加载失败')
| })
| }
| }
| },
| computed: {
|
| },
|
| created: function () {
| const _this = this
| _this.$once('hook:beforeDestroy', () => {
| _this.destroyHls()
| })
| },
|
| mounted () {
| const _this = this
| _this.loadVideoFn()
| },
|
| watch: {
| },
|
| components: {
|
| }
| }
| </script>
|
| <style lang="scss" scoped>
| #hlsVideo {
| width: 460px;
| height: 320px;
| border: none;
| object-fit: fill;
| }
| </style>
|
|
