修复工作
This commit is contained in:
@@ -47,129 +47,164 @@ export default {
|
|||||||
|
|
||||||
console.log('创建播放器，URL:', url, 'Element ID:', this.elId);
|
console.log('创建播放器，URL:', url, 'Element ID:', this.elId);
|
||||||
this.isPlay = true;
|
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)
|
|
||||||
});
|
|
||||||
|
|
||||||
// 监听播放器错误
|
// 等待 DOM 元素渲染完成
|
||||||
this.player.on('error', (error) => {
|
this.$nextTick(() => {
|
||||||
console.error('❌ 播放器错误:', error);
|
const videoElement = document.getElementById(this.elId);
|
||||||
console.error('错误详情:', JSON.stringify(error, null, 2));
|
console.log('📺 DOM 元素:', videoElement);
|
||||||
});
|
|
||||||
|
if (!videoElement) {
|
||||||
// 监听播放器就绪
|
console.error('❌ 找不到视频容器元素:', this.elId);
|
||||||
this.player.on('ready', () => {
|
return;
|
||||||
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';
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
this.player.on('ended', () => {});
|
this.player = new FlvJsPlayer({
|
||||||
this.player.on('blur', () => {
|
id: this.elId,
|
||||||
closeBtn.style.display = 'none';
|
url: url,
|
||||||
});
|
// fitVideoSize: 'auto',
|
||||||
|
fluid: true,
|
||||||
this.player.on('error', () => {});
|
autoplay: true,
|
||||||
|
isLive: true,
|
||||||
if (closeBtnc) {
|
playsinline: true,
|
||||||
closeBtnc.addEventListener('click', () => {
|
screenShot: true,
|
||||||
this.closePlayer();
|
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
|
let util = Player.util;
|
||||||
this.player.video.addEventListener('click', () => {
|
let customBtn = util.createDom(
|
||||||
// this.selectIndex = index;
|
'div',
|
||||||
// this.$parent.setSelectIndex(index);
|
divStr,
|
||||||
this.$emit('clickPlayer', index);
|
{ 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) {
|
// if (shot) {
|
||||||
|
|||||||
Reference in New Issue
Block a user