|
|
@@ -5,7 +5,18 @@
|
|
|
<el-col :span="24" class="video">
|
|
|
<el-col :span="24" class="top">
|
|
|
<span v-if="dockInfo.room_id == '1006'">
|
|
|
- <div id="ckplayera" class="h5video active"></div>
|
|
|
+ <video
|
|
|
+ id="videoElement"
|
|
|
+ autoplay="autoplay"
|
|
|
+ controls="controls"
|
|
|
+ preload="meta"
|
|
|
+ x-webkit-airplay="true"
|
|
|
+ webkit-playsinline="true"
|
|
|
+ playsinline="true"
|
|
|
+ x5-video-player-type="h5"
|
|
|
+ x5-video-player-fullscreen="true"
|
|
|
+ class="h5video"
|
|
|
+ ></video>
|
|
|
</span>
|
|
|
<span v-else>
|
|
|
<video
|
|
|
@@ -78,6 +89,7 @@ import jbft from './parts/jbft.vue';
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
const { mapActions: dock } = createNamespacedHelpers('dock');
|
|
|
import moment from 'moment';
|
|
|
+import flvjs from 'flv.js';
|
|
|
export default {
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|
|
|
@@ -115,7 +127,9 @@ export default {
|
|
|
}
|
|
|
await this.search();
|
|
|
await this.seachtVideo();
|
|
|
- this.ckplayerb();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.searchLive();
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
|
|
|
@@ -172,18 +186,18 @@ export default {
|
|
|
back() {
|
|
|
this.$router.push({ path: '/live/index' });
|
|
|
},
|
|
|
- ckplayerb() {
|
|
|
+ searchLive() {
|
|
|
+ let player = document.getElementById('videoElement');
|
|
|
let rmtpUrl = `${process.env.VUE_APP_LIVE_URL + this.dockInfo.room_id}`;
|
|
|
- setTimeout(function() {
|
|
|
- var videoObjects = {
|
|
|
- container: '#ckplayera',
|
|
|
- variable: 'player',
|
|
|
- autoplay: true,
|
|
|
- live: true,
|
|
|
- video: rmtpUrl,
|
|
|
- };
|
|
|
- let player = new ckplayer(videoObjects);
|
|
|
- }, 2);
|
|
|
+ if (flvjs.isSupported()) {
|
|
|
+ var flvPlayer = flvjs.createPlayer({
|
|
|
+ isLive: true,
|
|
|
+ type: 'flv',
|
|
|
+ url: rmtpUrl,
|
|
|
+ });
|
|
|
+ flvPlayer.attachMediaElement(player);
|
|
|
+ flvPlayer.load(); //加载
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
