diff --git a/rtsp-vue/src/views/video/device/component/cusPlayer.vue b/rtsp-vue/src/views/video/device/component/cusPlayer.vue
index f0710d8..19e956a 100644
--- a/rtsp-vue/src/views/video/device/component/cusPlayer.vue
+++ b/rtsp-vue/src/views/video/device/component/cusPlayer.vue
@@ -47,129 +47,164 @@ export default {
console.log('创建播放器，URL:', url, 'Element ID:', this.elId);
this.isPlay = true;
- this.player = new FlvJsPlayer({
- id: this.elId,
- url: url,
- // fitVideoSize: 'auto',
- fluid: true,
- autoplay: true,
- isLive: true,
- playsinline: false,
- screenShot: true,
- whitelist: [''],
- ignores: ['time'],
- closeVideoClick: true,
- // errorTips: '无视频源',
- customConfig: {
- isClickPlayBack: false
- },
- flvOptionalConfig: {
- enableWorker: true,
- enableStashBuffer: false, //关闭缓存
- stashInitialSize: 2048, //缓存大小2m
- lazyLoad: false,
- lazyLoadMaxDuration: 40 * 60,
- autoCleanupSourceBuffer: true,
- autoCleanupMaxBackwardDuration: 35 * 60,
- autoCleanupMinBackwardDuration: 30 * 60
- } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)
- });
- // 监听播放器错误
- this.player.on('error', (error) => {
- console.error('❌ 播放器错误:', error);
- console.error('错误详情:', JSON.stringify(error, null, 2));
- });
-
- // 监听播放器就绪
- this.player.on('ready', () => {
- console.log('✅ 播放器就绪');
- });
-
- // 监听播放开始
- this.player.on('play', () => {
- console.log('▶️ 开始播放');
- });
-
- // 监听播放暂停
- this.player.on('pause', () => {
- console.log('⏸️ 播放暂停');
- });
-
- // 监听视频加载开始
- this.player.on('loadstart', () => {
- console.log('🔄 开始加载视频数据');
- });
-
- // 监听视频元数据加载
- this.player.on('loadedmetadata', () => {
- console.log('📊 视频元数据已加载');
- });
-
- // 监听视频可以播放
- this.player.on('canplay', () => {
- console.log('✅ 视频可以播放');
- });
-
- // 监听等待数据
- this.player.on('waiting', () => {
- console.log('⏳ 等待视频数据...');
- });
-
- // 自定义播放器按钮
- // let divStr =
- // '' +
- // '' +
- // '';
-
- let divStr = '';
-
- let divClose = '';
-
- let util = Player.util;
- // let customBtn = util.createDom('div', divStr, {}, 'flex align-center justify-center app-player-button'); //'div', divStr, {}, 'class'
- let customBtn = util.createDom(
- 'div',
- divStr,
- { style: 'width: 40px;heigth:40px;position: absolute;right: 155px;top: 7px;' },
- 'flex align-center justify-center app-player-button'
- ); //'div', divStr, {}, 'class'
- let closeBtn = util.createDom('div', divClose, {}, 'app-close-btn');
- let xgControls = this.player.root.querySelector('xg-controls');
- let xgError = this.player.root.querySelector('xg-error');
- xgControls.appendChild(customBtn);
- this.player.root.appendChild(closeBtn);
-
- // let shot = customBtn.querySelector('.button-screen-shot');
- // let set = customBtn.querySelector('.button-set');
- // let history = customBtn.querySelector('.button-history');
- let closeBtnc = closeBtn.querySelector('.app-close-btn-c');
- let playback = customBtn.querySelector('.button-playback');
-
- this.player.on('play', () => {});
- this.player.on('focus', () => {
- if (hasCloseBtn) {
- closeBtn.style.display = 'block';
+ // 等待 DOM 元素渲染完成
+ this.$nextTick(() => {
+ const videoElement = document.getElementById(this.elId);
+ console.log('📺 DOM 元素:', videoElement);
+
+ if (!videoElement) {
+ console.error('❌ 找不到视频容器元素:', this.elId);
+ return;
}
- });
- this.player.on('ended', () => {});
- this.player.on('blur', () => {
- closeBtn.style.display = 'none';
- });
-
- this.player.on('error', () => {});
-
- if (closeBtnc) {
- closeBtnc.addEventListener('click', () => {
- this.closePlayer();
+
+ this.player = new FlvJsPlayer({
+ id: this.elId,
+ url: url,
+ // fitVideoSize: 'auto',
+ fluid: true,
+ autoplay: true,
+ isLive: true,
+ playsinline: true,
+ screenShot: true,
+ whitelist: [''],
+ ignores: ['time'],
+ closeVideoClick: true,
+ // errorTips: '无视频源',
+ customConfig: {
+ isClickPlayBack: false
+ },
+ flvOptionalConfig: {
+ enableWorker: true,
+ enableStashBuffer: false, //关闭缓存
+ stashInitialSize: 2048, //缓存大小2m
+ lazyLoad: false,
+ lazyLoadMaxDuration: 40 * 60,
+ autoCleanupSourceBuffer: true,
+ autoCleanupMaxBackwardDuration: 35 * 60,
+ autoCleanupMinBackwardDuration: 30 * 60
+ } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)
});
- }
+
+ console.log('✅ 播放器对象已创建:', this.player);
+ console.log('🎬 播放器底层视频元素:', this.player.video);
+
+ // 监听播放器错误
+ this.player.on('error', (error) => {
+ console.error('❌ 播放器错误:', error);
+ console.error('错误详情:', JSON.stringify(error, null, 2));
+ console.error('播放器状态:', {
+ paused: this.player.video.paused,
+ currentTime: this.player.video.currentTime,
+ duration: this.player.video.duration,
+ readyState: this.player.video.readyState,
+ networkState: this.player.video.networkState
+ });
+ });
+
+ // 监听播放器就绪
+ this.player.on('ready', () => {
+ console.log('✅ 播放器就绪');
+ });
+
+ // 监听播放开始
+ this.player.on('play', () => {
+ console.log('▶️ 开始播放');
+ });
+
+ // 监听播放暂停
+ this.player.on('pause', () => {
+ console.log('⏸️ 播放暂停');
+ });
+
+ // 监听视频加载开始
+ this.player.on('loadstart', () => {
+ console.log('🔄 开始加载视频数据');
+ });
+
+ // 监听视频元数据加载
+ this.player.on('loadedmetadata', () => {
+ console.log('📊 视频元数据已加载');
+ console.log('视频信息:', {
+ width: this.player.video.videoWidth,
+ height: this.player.video.videoHeight,
+ duration: this.player.video.duration
+ });
+ });
+
+ // 监听视频可以播放
+ this.player.on('canplay', () => {
+ console.log('✅ 视频可以播放，尝试播放...');
+ // 确保播放
+ this.player.play().then(() => {
+ console.log('▶️ 播放已启动');
+ }).catch(err => {
+ console.error('播放失败:', err);
+ });
+ });
+
+ // 监听等待数据
+ this.player.on('waiting', () => {
+ console.log('⏳ 等待视频数据...');
+ });
+
+ // 监听数据接收
+ this.player.on('progress', () => {
+ console.log('📥 正在接收数据...');
+ });
+
+ // 监听播放失败
+ this.player.on('ended', () => {
+ console.log('⏹️ 播放结束');
+ });
+
+ // 输出播放器完整配置
+ console.log('🔧 播放器配置:', {
+ url: url,
+ elId: this.elId,
+ isLive: true,
+ autoplay: true
+ });
+
+ // 自定义播放器按钮（移到 $nextTick 内部，确保 player 已创建）
+ let divStr = '';
+ let divClose = '';
- // 点击视频时间，设置selectIndex
- this.player.video.addEventListener('click', () => {
- // this.selectIndex = index;
- // this.$parent.setSelectIndex(index);
- this.$emit('clickPlayer', index);
+ let util = Player.util;
+ let customBtn = util.createDom(
+ 'div',
+ divStr,
+ { style: 'width: 40px;heigth:40px;position: absolute;right: 155px;top: 7px;' },
+ 'flex align-center justify-center app-player-button'
+ );
+ let closeBtn = util.createDom('div', divClose, {}, 'app-close-btn');
+ let xgControls = this.player.root.querySelector('xg-controls');
+ let xgError = this.player.root.querySelector('xg-error');
+ xgControls.appendChild(customBtn);
+ this.player.root.appendChild(closeBtn);
+
+ let closeBtnc = closeBtn.querySelector('.app-close-btn-c');
+ let playback = customBtn.querySelector('.button-playback');
+
+ this.player.on('focus', () => {
+ if (hasCloseBtn) {
+ closeBtn.style.display = 'block';
+ }
+ });
+ this.player.on('blur', () => {
+ closeBtn.style.display = 'none';
+ });
+
+ if (closeBtnc) {
+ closeBtnc.addEventListener('click', () => {
+ this.closePlayer();
+ });
+ }
+
+ // 点击视频时间，设置selectIndex
+ this.player.video.addEventListener('click', () => {
+ this.$emit('clickPlayer', index);
+ });
});
// if (shot) {