Skip to content

蒋秀川 / miniProject

Go to a project
Commit 5d3c6c84 by Tianqing Liu
Options

feat: 倍速回放功能

1 parent 4675e97e
Inline Side-by-side
Showing 3 changed files with 62 additions and 9 deletions
h5/src/components/vionPlayer/config.js
...@@ -78,3 +78,16 @@ export function getMirrorRotate() { ...@@ -78,3 +78,16 @@ export function getMirrorRotate() {
click: this.mirrorRotate, click: this.mirrorRotate,
} }
} }
export function getPlaybackConfig() {
return {
controlType: 'simple',
showRateBtn: true,
rateConfig: [
{ label: '0.5x', value: 0.5 },
{ label: '1x', value: 1 },
{ label: '2x', value: 2 },
{ label: '4x', value: 4 },
],
}
}
h5/src/components/vionPlayer/index.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
import { merge } from 'lodash'; import { merge } from 'lodash';
// checkSupportMSEHevc checkSupportSIMD, checkSupportWCSHevc // checkSupportMSEHevc checkSupportSIMD, checkSupportWCSHevc
import { getWatermarkCanvasImg } from './utils'; import { getWatermarkCanvasImg } from './utils';
import { getPlayerConfig, getRotateConfig, getMirrorRotate } from './config'; import { getPlayerConfig, getRotateConfig, getMirrorRotate, getPlaybackConfig } from './config';
export default { export default {
name: 'VionPlayer', name: 'VionPlayer',
...@@ -27,6 +27,10 @@ export default { ...@@ -27,6 +27,10 @@ export default {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
isPlayback: {
type: Boolean,
default: false,
},
// 是否是小程序 // 是否是小程序
isXCXPage: { isXCXPage: {
type: Boolean, type: Boolean,
...@@ -115,27 +119,52 @@ export default { ...@@ -115,27 +119,52 @@ export default {
// console.log('ptz', arrow); // console.log('ptz', arrow);
this.$emit('ptz-control', arrow); this.$emit('ptz-control', arrow);
}); });
// 改变倍速事件
playerIns.on('playbackPreRateChange', (rate) => {
// console.log('playbackPreRateChange', rate);
this.$emit('rate-change', rate, this.setForward);
});
// 点击时间轴跳转事件
playerIns.on('playbackSeek', (data) => {
console.log('playbackSeek', data);
// jessibuca.setPlaybackStartTime(data.ts);
});
},
setForward(rate) {
this._jessibuca.forward(rate);
}, },
getWatermarkBase64() { getWatermarkBase64() {
const data = getWatermarkCanvasImg(150, 48, '文安智能'); const data = getWatermarkCanvasImg(150, 48, '文安智能');
console.log('getWatermarkBase64', data); console.log('getWatermarkBase64', data);
}, },
delayPlay(url) { delayPlay(url, isPlayback = false) {
setTimeout(() => { setTimeout(() => {
this._jessibuca.play(url); if (isPlayback) {
this._jessibuca.playback(url, getPlaybackConfig());
} else {
this._jessibuca.play(url);
}
this.playOriginUrl = url; this.playOriginUrl = url;
}, 150); }, 150);
}, },
// 获取是否是回放状态
getPlaybackStatus(status) {
// 传入参数 优先级 大于属性
return status || this.isPlayback;
},
// 暴露方法 // 暴露方法
play(url) { play(url, isPlayback = false) {
if (url) { if (url) {
const playbackStatus = this.getPlaybackStatus(isPlayback);
// 播放地址不同，则先停止再播放。地址相同，相当于暂停后，继续播放 // 播放地址不同，则先停止再播放。地址相同，相当于暂停后，继续播放
if (this.playOriginUrl && this.playOriginUrl !== url) { // 若是回放，则直接播放
if (!playbackStatus && this.playOriginUrl && this.playOriginUrl !== url) {
// 切换视频流地址，先销毁当前实例，再创建新实例，避免内存溢出 // 切换视频流地址，先销毁当前实例，再创建新实例，避免内存溢出
this.replay(url); this.replay(url);
} else { } else {
this.delayPlay(url); this.delayPlay(url, playbackStatus);
} }
} else { } else {
console.error('The url is not valid'); console.error('The url is not valid');
...@@ -224,6 +253,10 @@ export default { ...@@ -224,6 +253,10 @@ export default {
height: 100%; height: 100%;
widows: 100%; widows: 100%;
background-color: rgba(13, 14, 27, 0.7); background-color: rgba(13, 14, 27, 0.7);
// 时间轴
::v-deep(.jessibuca-control-progress-simple) {
display: none;
}
} }
.hide-controls { .hide-controls {
::v-deep(.jessibuca-controls) { ::v-deep(.jessibuca-controls) {
......
h5/src/views/player/vionPlayerDemo.vue
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
:datetime-range="datetimeRange" :datetime-range="datetimeRange"
watermarkText="文安智能678" watermarkText="文安智能678"
@ptz-control="handlePtz" @ptz-control="handlePtz"
@rate-change="handleRateChange"
/> />
</div> </div>
<div class="footer"> <div class="footer">
...@@ -51,9 +52,10 @@ export default { ...@@ -51,9 +52,10 @@ export default {
base64Url: '', base64Url: '',
// 播放器相关 // 播放器相关
playUrl: 'https://rtmp01open.ys7.com:9188/v3/openlive/F16423875_4_1.flv?expire=1695696850&id=626370860302729216&t=8c5be77f3d74149d2cdb93f913baf0c171bc33f8d6b6507510e8869b3392a4da&ev=100&supportH265=1', playUrl: 'https://rtmp01open.ys7.com:9188/v3/openlive/F16423875_4_1.flv?expire=1695801507&id=626809821921091584&t=012b62efc1b531ada1d08aae3d374c4cb9cf999a87f38b298b52a14bbcc51883&ev=100&supportH265=1',
// playUrl: 'http://flv.bdplay.nodemedia.cn/live/bbb_264.flv',
// playUrl: '', // playUrl: '',
recordUrl: '', recordUrl: 'https://rtmp01open.ys7.com:9188/v3/openpb/F16423875_1_1.flv?begin=20230925113136&end=20230925182952&expire=1695724192&id=626485541843505152&rec=local&t=1a3147ede9f0c48ed31df986f8e1a24b39ebcebf0325c134bdae5d8bbda078f5&ev=100&supportH265=1',
} }
}, },
methods: { methods: {
...@@ -69,7 +71,7 @@ export default { ...@@ -69,7 +71,7 @@ export default {
this.playerVisible = true; this.playerVisible = true;
}, },
handleRecord() { handleRecord() {
this.$refs.vionPlayer.play(this.recordUrl); this.$refs.vionPlayer.play(this.recordUrl, true);
}, },
handleScreenshot() { handleScreenshot() {
this.$refs.vionPlayer.screenshot().then(data => { this.$refs.vionPlayer.screenshot().then(data => {
...@@ -101,6 +103,11 @@ export default { ...@@ -101,6 +103,11 @@ export default {
handlePtz(arrow) { handlePtz(arrow) {
console.log('handlePtz', arrow); console.log('handlePtz', arrow);
}, },
handleRateChange(rate, done) {
console.log('handleRateChange', rate, done);
// 请求接口，获取流地址
done(rate);
},
}, },
} }
</script> </script>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!