index.vue
1.61 KB
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
<template>
<div class="container">
<video id="id_test_video" style="width:100%; height:100vh;"></video>
</div>
</template>
<script>
export default {
data() {
return {
streaName: ''
};
},
created() {
let streaName = this.$route.query.id;
this.streaName = streaName;
},
mounted() {
this.$nextTick(function () {
let url = `http://watch.t1j2.com/live/${this.streaName}.m3u8`;
let player = TCPlayer("id_test_video", {
m3u8: `http://watch.t1j2.com/live/${this.streaName}.m3u8`,
flv: `http://watch.t1j2.com/live/${this.streaName}.flv`, //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
poster: "",
width: "1200", //视频的显示宽度，请尽量使用视频分辨率宽度
height: "800", //视频的显示高度，请尽量使用视频分辨率高度
});
player.src(url)
});
},
methods: {},
};
</script>
<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 50px);
background-color: #000;
}
#id_test_video {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<style scoped>
>>>.vcp-player {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
video{
width: 100vw!important;
height: 100vh!important;
}
</style>