|
@@ -46,8 +46,8 @@
|
|
|
<div class="w_1200">
|
|
|
<el-col :span="24" class="livemain">
|
|
|
<el-col :span="24" class="livevideo">
|
|
|
- <el-col :span="24" class="left" @click.native="btnDirectDetail">
|
|
|
- <el-col :span="24" class="title">
|
|
|
+ <el-col :span="24" class="left">
|
|
|
+ <el-col :span="24" class="title" @click.native="btnDirectDetail">
|
|
|
<span style="color: rgb(255, 132, 0);">现场</span>
|
|
|
<span>直播</span>
|
|
|
</el-col>
|
|
@@ -55,6 +55,7 @@
|
|
|
<video :src="file_path" controls="controls" style="height: 395px; width: 100%;">
|
|
|
您的浏览器不支持 video 标签。
|
|
|
</video>
|
|
|
+ <!-- <videoPlayer ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer" :playsinline="true" /> -->
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="right">
|
|
@@ -94,6 +95,9 @@
|
|
|
</ul>
|
|
|
</el-col>
|
|
|
</el-tab-pane>
|
|
|
+ <!-- <el-tab-pane label="推流测试" name="four"> </el-tab-pane>
|
|
|
+ <el-tab-pane label="拉流测试" name="five"> </el-tab-pane>
|
|
|
+ <el-tab-pane label="推流测试2" name="six"> </el-tab-pane> -->
|
|
|
</el-tabs>
|
|
|
</el-col>
|
|
|
<!-- -->
|
|
@@ -115,7 +119,10 @@
|
|
|
</el-col>
|
|
|
<el-col :span="4" class="btn">
|
|
|
<el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
|
|
|
- <el-button size="mini" type="success" @click="$router.push({ path: '/live/hall/dock/dockDetail', query: { id: item.id, dockid: id } })"
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="success"
|
|
|
+ @click="$router.push({ path: '/live/hall/dock/dockDetail', query: { id: item.id, dockid: id, user_id: user_id } })"
|
|
|
>对接</el-button
|
|
|
>
|
|
|
</el-col>
|
|
@@ -145,7 +152,10 @@
|
|
|
</el-col>
|
|
|
<el-col :span="4" class="btn">
|
|
|
<el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
|
|
|
- <el-button size="mini" type="success" @click="$router.push({ path: '/live/hall/dock/dockDetail', query: { id: item.id, dockid: id } })"
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="success"
|
|
|
+ @click="$router.push({ path: '/live/hall/dock/dockDetail', query: { id: item.id, dockid: id, user_id: user_id } })"
|
|
|
>对接</el-button
|
|
|
>
|
|
|
</el-col>
|
|
@@ -175,7 +185,10 @@
|
|
|
</el-col>
|
|
|
<el-col :span="4" class="btn">
|
|
|
<el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
|
|
|
- <el-button size="mini" type="success" @click="$router.push({ path: '/live/hall/dock/dockDetail', query: { id: item.id, dockid: id } })"
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="success"
|
|
|
+ @click="$router.push({ path: '/live/hall/dock/dockDetail', query: { id: item.id, dockid: id, user_id: user_id } })"
|
|
|
>对接</el-button
|
|
|
>
|
|
|
</el-col>
|
|
@@ -295,6 +308,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import 'video.js/dist/video-js.css';
|
|
|
+import 'vue-video-player/src/custom-theme.css';
|
|
|
+import { videoPlayer } from 'vue-video-player';
|
|
|
+import 'videojs-flash';
|
|
|
+
|
|
|
import liveFoot from '@/layout/live/foot.vue';
|
|
|
import chat from '@/components/parts/chat.vue';
|
|
|
import directDetail from '@/layout/direct/directDetail.vue';
|
|
@@ -326,6 +344,7 @@ export default {
|
|
|
liveFoot,
|
|
|
directDetail, //技术,产品,服务详情
|
|
|
exportDetail, //专家详情
|
|
|
+ // videoPlayer,
|
|
|
},
|
|
|
data: () => ({
|
|
|
activeName: 'second',
|
|
@@ -348,6 +367,8 @@ export default {
|
|
|
serviceList: [],
|
|
|
// 找专家
|
|
|
expertList: [],
|
|
|
+ //对接会创建人id
|
|
|
+ user_id: '',
|
|
|
// 路演
|
|
|
luyanList: [
|
|
|
{
|
|
@@ -469,6 +490,35 @@ export default {
|
|
|
chengguo: '',
|
|
|
qiatan: '',
|
|
|
dacheng: '',
|
|
|
+ videoSrc: '',
|
|
|
+ videoOptions: {
|
|
|
+ playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
|
|
|
+ autoplay: false, //如果true,浏览器准备好时开始回放。
|
|
|
+ muted: false, // 默认情况下将会消除任何音频。
|
|
|
+ loop: false, // 导致视频一结束就重新开始。
|
|
|
+ preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
|
|
|
+ language: 'zh-CN',
|
|
|
+ aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
|
|
|
+ techOrder: ['flash', 'html5'], // 兼容顺序
|
|
|
+ fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
|
|
|
+ sources: [
|
|
|
+ {
|
|
|
+ // 流配置,数组形式,会根据兼容顺序自动切换
|
|
|
+ type: 'rtmp/hls',
|
|
|
+ src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
|
|
|
+ // src: 'rtmp://play.liaoningdoupo.com/live/1',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ poster: '', //你的封面地址
|
|
|
+ // width: document.documentElement.clientWidth,
|
|
|
+ notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
+ controlBar: {
|
|
|
+ timeDivider: true,
|
|
|
+ durationDisplay: true,
|
|
|
+ remainingTimeDisplay: false,
|
|
|
+ fullscreenToggle: true, //全屏按钮
|
|
|
+ },
|
|
|
+ },
|
|
|
}),
|
|
|
created() {
|
|
|
this.searchInfo();
|
|
@@ -488,6 +538,7 @@ export default {
|
|
|
let res = await this.dockFetch(this.id);
|
|
|
this.$set(this, `title`, res.data.title);
|
|
|
this.$set(this, `file_path`, res.data.file_path);
|
|
|
+ this.$set(this, `user_id`, res.data.user_id);
|
|
|
console.log(res.data);
|
|
|
// 交易实况
|
|
|
let aaa = await this.tquery({ dockid: this.id });
|
|
@@ -636,7 +687,13 @@ export default {
|
|
|
this.$router.push({ path: '/live/hall/dock/zhanjiaduijie', query: { id: data.id, dockid: this.id } });
|
|
|
},
|
|
|
handleClicks(tab, event) {
|
|
|
- console.log(tab, event);
|
|
|
+ if (tab.name == 'four') {
|
|
|
+ this.$router.push('/tltest');
|
|
|
+ } else if (tab.name == 'five') {
|
|
|
+ this.$router.push('/tllltest');
|
|
|
+ } else if (tab.name == 'six') {
|
|
|
+ this.$router.push('/tltest2');
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
// 关闭专家详情
|
|
@@ -673,7 +730,7 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 487px;
|
|
|
overflow: hidden;
|
|
|
- background-image: url(../assets/live/top_3.png);
|
|
|
+ background-image: url(../../assets/live/top_3.png);
|
|
|
}
|
|
|
.livetop .title {
|
|
|
text-align: center;
|
|
@@ -1155,4 +1212,7 @@ export default {
|
|
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
|
width: 100%;
|
|
|
}
|
|
|
+/deep/.video-js {
|
|
|
+ height: 396px !important;
|
|
|
+}
|
|
|
</style>
|