Commit 94640d58 by Tianqing Liu

feat: 播放视频源成功

1 parent 9b0dbdb6
......@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="./jessibuca/jessibuca.js"></script>
</head>
<body>
<noscript>
......
This diff could not be displayed because it is too large.
No preview for this file type
This diff could not be displayed because it is too large.
......@@ -4,7 +4,70 @@
<script>
export default {
name: 'VionPlayer',
name: 'VionPlayer',
data() {
return {
// eslint-disable-next-line
_jessibuca: null,
}
},
mounted() {
this.init();
},
methods:{
init(params = {}) {
const options = Object.assign({
container: this.$refs.container,
decoder: './jessibuca/decoder.js',
isResize: false,
text: '', // TODO: 功能暂不清楚
useMSE: false,
useWCS: false,
isNotMute: false,
timeout: 10,
debug: true, // 是否开启控制台调试打印
// 按钮和界面
loadingText: '加载中...',
controlAutoHide: false,
supportDblclickFullscreen: false,
showBandwidth: false, // 显示网速
operateBtns: {
fullscreen: true,
screenshot: false,
play: true,
audio: true,
},
});
this._jessibuca = new window.Jessibuca(options);
this.registerEvent(this._jessibuca);
},
registerEvent(playerIns) {
playerIns.on("log", msg => {
console.log("on-log", msg);
});
},
// 暴露方法
play(url) {
if (url) {
this._jessibuca.play(url);
} else {
console.error('The url is not valid');
}
},
pause() {
this._jessibuca.pause();
},
destroy() {
if (this._jessibuca) {
this._jessibuca.destroy();
}
this.init();
},
},
}
</script>
......
<template>
<div class="j-player-demo">
<div class="player-content">
<vion-player ref="vionPlay"
<vion-player ref="vionPlayer"
:type="playerType"
prefix-url=""
player-address="52.130.155.147"
......@@ -11,10 +11,15 @@
/>
</div>
<div class="footer">
<button @click="handleLive">直播</button>
<button @click="handlePlayback">回放</button>
<div class="play">
<input type="text" v-model="playUrl">
<button @click="handlePlay">播放</button>
</div>
<!-- <button @click="handleLive">直播</button> -->
<!-- <button @click="handlePlayback">回放</button> -->
<button @click="handlePause">暂停</button>
<button @click="handleStop">停止</button>
<button @click="handleScreenshot">抓拍</button>
<!-- <button @click="handleScreenshot">抓拍</button> -->
</div>
</div>
</template>
......@@ -31,9 +36,16 @@ export default {
return {
playerType: 'live',
datetimeRange: [],
// 播放器相关
playUrl: 'https://xyrtmp.ys7.com:9188/v3/openlive/33011015992467054043:33010285991117359447_1_1.flv?expire=1695197391&id=624275978952122369&t=5d6125d91a189547ecc984fd4f153abea9dbf72b6bc77a88c7d5e6054ae7df48&ev=100&devProto=gb28181&supportH265=1',
}
},
methods: {
handlePlay() {
const url = this.playUrl;
this.$refs.vionPlayer.play(url);
},
handleLive() {
this.playerType = 'live';
},
......@@ -45,13 +57,15 @@ export default {
];
},
handleScreenshot() {
this.$refs.jplay.screenshotWatermark().then(data => {
this.$refs.vionPlayer.screenshotWatermark().then(data => {
console.log('handleScreenshot', data);
});
},
handlePause() {
this.$refs.vionPlayer.pause();
},
handleStop() {
const result = this.$refs.jplay.stopPlay();
console.log('handleStop', result);
this.$refs.vionPlayer.destroy();
},
},
}
......@@ -73,6 +87,13 @@ export default {
}
> .footer {
margin-top: 10px;
> div.play {
display: inline-block;
margin-right: 10px;
> button {
margin-left: 2px;
}
}
> button {
margin-right: 10px;
}
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!