index.vue
1.31 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
<template>
<div class="container">
<div id="id_test_video" style="width:100%; height:auto;"></div>
</div>
</template>
<script>
export default {
data() {
return {
streaName:''
};
},
created(){
let streaName = this.$route.query.id;
this.streaName = streaName;
},
mounted() {
var player = new 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", //视频的显示高度，请尽量使用视频分辨率高度
});
},
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;
}
</style>