|
|
@@ -243,6 +243,7 @@ export default defineComponent({
|
|
|
let previousBytesLoaded = 0;
|
|
|
let timer: any = null;
|
|
|
let previousTime = Date.now();
|
|
|
+ let isWaiting = false;
|
|
|
|
|
|
// 缓存检测状态
|
|
|
let isBuffering = false;
|
|
|
@@ -270,117 +271,83 @@ export default defineComponent({
|
|
|
}, BUFFER_CHECK_INTERVAL);
|
|
|
}
|
|
|
|
|
|
- element.addEventListener('loadedmetadata', () => {
|
|
|
- // 获取视频总时长
|
|
|
- const duration = element.duration;
|
|
|
-
|
|
|
- element.addEventListener('progress', () => {
|
|
|
- const currentTime = Date.now();
|
|
|
- const buffered = element.buffered;
|
|
|
- let currentBytesLoaded = 0;
|
|
|
-
|
|
|
- // 计算视频已缓存的总时长
|
|
|
- let cachedDuration = 0;
|
|
|
- if (buffered.length > 0) {
|
|
|
- for (let i = 0; i < buffered.length; i++) {
|
|
|
- currentBytesLoaded += buffered.end(i) - buffered.start(i);
|
|
|
- cachedDuration += buffered.end(i) - buffered.start(i);
|
|
|
- }
|
|
|
- currentBytesLoaded *= element.duration * element.seekable.end(0); // 更精确地近似字节加载量
|
|
|
- }
|
|
|
+ element.addEventListener('progress', () => {
|
|
|
+ const currentTime = Date.now();
|
|
|
+ const buffered = element.buffered;
|
|
|
+ let currentBytesLoaded = 0;
|
|
|
|
|
|
- // 输出未缓存的时间段
|
|
|
- // console.log('未缓存的时间段:', uncachedDuration);
|
|
|
- // 计算未缓存的时间段
|
|
|
- const uncachedDuration = duration - cachedDuration;
|
|
|
- // 如果存在未缓存的时间段，可以根据具体情况做出相应处理
|
|
|
- if (uncachedDuration > 0) {
|
|
|
- // console.log('视频部分内容尚未缓存完全！');
|
|
|
- if (currentBytesLoaded > previousBytesLoaded) {
|
|
|
- const timeDiff = (currentTime - previousTime) / 1000; // 时间差转换为秒
|
|
|
- const bytesDiff = currentBytesLoaded - previousBytesLoaded; // 字节差值
|
|
|
- const speed = bytesDiff / timeDiff; // 字节每秒
|
|
|
- // console.log(timeDiff, bytesDiff, speed);
|
|
|
- // console.log(element.paused, 'element.paused');
|
|
|
- if (!element.paused) {
|
|
|
- const kbps = speed / 1024;
|
|
|
- const speedInKbps = kbps.toFixed(2); // 转换为千字节每秒并保留两位小数
|
|
|
- if (kbps > 1024) {
|
|
|
- data.speedInKbps = `${Number((kbps / 1024).toFixed(2))} M/s`;
|
|
|
- } else {
|
|
|
- data.speedInKbps = `${Number(speedInKbps)} KB/s`;
|
|
|
- }
|
|
|
- }
|
|
|
+ if (buffered.length > 0) {
|
|
|
+ for (let i = 0; i < buffered.length; i++) {
|
|
|
+ currentBytesLoaded += buffered.end(i) - buffered.start(i);
|
|
|
+ }
|
|
|
+ currentBytesLoaded *= element.duration * element.seekable.end(0); // 更精确地近似字节加载量
|
|
|
+ }
|
|
|
|
|
|
- previousBytesLoaded = currentBytesLoaded;
|
|
|
- previousTime = currentTime;
|
|
|
+ console.log('progress', currentBytesLoaded > previousBytesLoaded);
|
|
|
+ if (currentBytesLoaded > previousBytesLoaded) {
|
|
|
+ const timeDiff = (currentTime - previousTime) / 1000; // 时间差转换为秒
|
|
|
+ const bytesDiff = currentBytesLoaded - previousBytesLoaded; // 字节差值
|
|
|
+ const speed = bytesDiff / timeDiff; // 字节每秒
|
|
|
+
|
|
|
+ console.log(timeDiff, bytesDiff, speed);
|
|
|
+
|
|
|
+ if (!element.paused) {
|
|
|
+ const kbps = speed / 1024;
|
|
|
+ const speedInKbps = kbps.toFixed(2); // 转换为千字节每秒并保留两位小数
|
|
|
+ if (kbps > 1024) {
|
|
|
+ data.speedInKbps = `${Number((kbps / 1024).toFixed(2))} M/s`;
|
|
|
+ } else {
|
|
|
+ data.speedInKbps = `${Number(speedInKbps)} KB/s`;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- if (!element.paused) {
|
|
|
- // 如果1秒钟没有返回就重置数据
|
|
|
- clearTimeout(timer);
|
|
|
- resetDownloadSpeed();
|
|
|
- }
|
|
|
- } else {
|
|
|
- console.log('整个视频已缓存完毕！');
|
|
|
- // 如果有缓存检测计时器，则清除它
|
|
|
- if (bufferTimeout) {
|
|
|
- clearTimeout(bufferTimeout);
|
|
|
- }
|
|
|
- // 标记为正在缓存
|
|
|
- isBuffering = true;
|
|
|
+ previousBytesLoaded = currentBytesLoaded;
|
|
|
+ previousTime = currentTime;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!element.paused) {
|
|
|
+ // 如果1秒钟没有返回就重置数据
|
|
|
+ clearTimeout(timer);
|
|
|
+ resetDownloadSpeed();
|
|
|
+ }
|
|
|
|
|
|
- buffterCatch();
|
|
|
+ if (!isWaiting) {
|
|
|
+ // 如果有缓存检测计时器，则清除它
|
|
|
+ if (bufferTimeout) {
|
|
|
+ clearTimeout(bufferTimeout);
|
|
|
}
|
|
|
- });
|
|
|
+ // 标记为正在缓存
|
|
|
+ isBuffering = true;
|
|
|
+ buffterCatch();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ element.addEventListener('waiting', () => {
|
|
|
+ console.log('waiting');
|
|
|
+ isWaiting = true;
|
|
|
+
|
|
|
+ if (!element.paused) {
|
|
|
+ // 如果1秒钟没有返回就重置数据
|
|
|
+ clearTimeout(timer);
|
|
|
+ resetDownloadSpeed();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果有缓存检测计时器，则清除它
|
|
|
+ if (bufferTimeout) {
|
|
|
+ clearTimeout(bufferTimeout);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ element.addEventListener('canplay', () => {
|
|
|
+ console.log('canplay');
|
|
|
+ isWaiting = false;
|
|
|
+ // 如果有缓存检测计时器，则清除它
|
|
|
+ if (bufferTimeout) {
|
|
|
+ clearTimeout(bufferTimeout);
|
|
|
+ }
|
|
|
+ // 标记为正在缓存
|
|
|
+ isBuffering = true;
|
|
|
+ buffterCatch();
|
|
|
});
|
|
|
- // element.addEventListener('progress', () => {
|
|
|
- // const currentTime = Date.now();
|
|
|
- // const buffered = element.buffered;
|
|
|
- // let currentBytesLoaded = 0;
|
|
|
-
|
|
|
- // if (buffered.length > 0) {
|
|
|
- // for (let i = 0; i < buffered.length; i++) {
|
|
|
- // currentBytesLoaded += buffered.end(i) - buffered.start(i);
|
|
|
- // }
|
|
|
- // currentBytesLoaded *= element.duration * element.seekable.end(0); // 更精确地近似字节加载量
|
|
|
- // }
|
|
|
-
|
|
|
- // console.log('progress', currentBytesLoaded > previousBytesLoaded);
|
|
|
- // if (currentBytesLoaded > previousBytesLoaded) {
|
|
|
- // const timeDiff = (currentTime - previousTime) / 1000; // 时间差转换为秒
|
|
|
- // const bytesDiff = currentBytesLoaded - previousBytesLoaded; // 字节差值
|
|
|
- // const speed = bytesDiff / timeDiff; // 字节每秒
|
|
|
-
|
|
|
- // console.log(timeDiff, bytesDiff, speed);
|
|
|
-
|
|
|
- // if (!element.paused) {
|
|
|
- // const kbps = speed / 1024;
|
|
|
- // const speedInKbps = kbps.toFixed(2); // 转换为千字节每秒并保留两位小数
|
|
|
- // if (kbps > 1024) {
|
|
|
- // data.speedInKbps = `${Number((kbps / 1024).toFixed(2))} M/s`;
|
|
|
- // } else {
|
|
|
- // data.speedInKbps = `${Number(speedInKbps)} KB/s`;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- // previousBytesLoaded = currentBytesLoaded;
|
|
|
- // previousTime = currentTime;
|
|
|
-
|
|
|
- // // 如果1秒钟没有返回就重置数据
|
|
|
- // clearTimeout(timer);
|
|
|
- // resetDownloadSpeed();
|
|
|
- // }
|
|
|
-
|
|
|
- // // 如果有缓存检测计时器，则清除它
|
|
|
- // if (bufferTimeout) {
|
|
|
- // clearTimeout(bufferTimeout);
|
|
|
- // }
|
|
|
- // // 标记为正在缓存
|
|
|
- // isBuffering = true;
|
|
|
-
|
|
|
- // buffterCatch();
|
|
|
- // });
|
|
|
|
|
|
element.addEventListener('pause', () => {
|
|
|
clearTimeout(timer);
|
|
|
@@ -390,6 +357,10 @@ export default defineComponent({
|
|
|
}
|
|
|
data.speedInKbps = '';
|
|
|
});
|
|
|
+ element.addEventListener('error', () => {
|
|
|
+ element.pause();
|
|
|
+ videoItem.value.pause();
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
