修复工作
This commit is contained in:
@@ -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: '<span class="app-error">无视频源</span>',
|
||||
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 =
|
||||
// '<i class="btn-hover el-icon-camera button-screen-shot" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>' +
|
||||
// '<i class="btn-hover el-icon-s-tools button-set" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>' +
|
||||
// '<i class="btn-hover el-icon-video-camera-solid button-history" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>';
|
||||
|
||||
let divStr = '<i class="btn-hover el-icon-d-arrow-left button-playback" style="font-size: 23px;pointer-events: auto;"></i>';
|
||||
|
||||
let divClose = '<i @click="closePlayer" class="btn-hover el-icon-close app-close-btn-c"></i>';
|
||||
|
||||
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: '<span class="app-error">无视频源</span>',
|
||||
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 = '<i class="btn-hover el-icon-d-arrow-left button-playback" style="font-size: 23px;pointer-events: auto;"></i>';
|
||||
let divClose = '<i class="btn-hover el-icon-close app-close-btn-c"></i>';
|
||||
|
||||
// 点击视频时间，设置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) {
|
||||
|
||||
Reference in New Issue
Block a user