|
@@ -19,7 +19,7 @@ import iconpause from '../image/icon-play.png';
|
|
|
import iconLoop from '../image/icon-loop.svg';
|
|
|
import iconLoopActive from '../image/icon-loop-active.svg';
|
|
|
import iconSpeed from '../image/icon-speed.png';
|
|
|
-import { NSlider } from 'naive-ui';
|
|
|
+import { NSlider, useMessage } from 'naive-ui';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'video-play',
|
|
@@ -55,6 +55,7 @@ export default defineComponent({
|
|
|
],
|
|
|
setup(props, { emit, expose }) {
|
|
|
const { item, isEmtry } = toRefs(props);
|
|
|
+ const message = useMessage();
|
|
|
const videoFroms = reactive({
|
|
|
paused: true,
|
|
|
speedInKbps: '',
|
|
@@ -70,7 +71,11 @@ export default defineComponent({
|
|
|
speedStyle: {
|
|
|
left: '1px'
|
|
|
},
|
|
|
- defaultSpeed: 1 // 默认速度
|
|
|
+ defaultSpeed: 1, // 默认速度
|
|
|
+
|
|
|
+ // 添加缓冲状态标识
|
|
|
+ isBuffering: false,
|
|
|
+ bufferTimeout: null as any
|
|
|
});
|
|
|
const videoRef = ref();
|
|
|
const videoItem = ref();
|
|
@@ -147,7 +152,7 @@ export default defineComponent({
|
|
|
if (videoItem.value) {
|
|
|
console.log(item.value, 'item.value');
|
|
|
videoItem.value.poster(props.item.coverImg); // 封面
|
|
|
- videoItem.value.src(item.value.content); // url 播放地址
|
|
|
+ videoItem.value.src(item.value.content + '?t=' + Date.now()); // url 播放地址
|
|
|
videoItem.value.playbackRate(videoFroms.defaultSpeed);
|
|
|
// 初步加载时
|
|
|
videoItem.value.one('loadedmetadata', () => {
|
|
@@ -193,6 +198,32 @@ export default defineComponent({
|
|
|
emit('ended');
|
|
|
});
|
|
|
|
|
|
+ videoItem.value.on('waiting', () => {
|
|
|
+ console.log('waiting')
|
|
|
+
|
|
|
+ videoFroms.isBuffering = true;
|
|
|
+
|
|
|
+ // 设置缓冲超时检测(5秒)
|
|
|
+ videoFroms.bufferTimeout = setTimeout(() => {
|
|
|
+ if (videoFroms.isBuffering) {
|
|
|
+ console.log('缓冲超时,暂停播放');
|
|
|
+ videoItem.value.pause();
|
|
|
+ videoFroms.paused = true;
|
|
|
+ message.info('网络连接不稳定,请检查网络后继续播放', {
|
|
|
+ showIcon: false,
|
|
|
+ render: (props: any) => {
|
|
|
+ return (
|
|
|
+ <div style="background: rgba(0,0,0,.6); color: #fff; border-radius: 8px; padding: 6px 16px;">
|
|
|
+ {props.content}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ videoItem.value.currentTime(videoItem.value.currentTime() + 0.01);
|
|
|
+ }
|
|
|
+ }, 15000);
|
|
|
+ });
|
|
|
+
|
|
|
//
|
|
|
videoItem.value.on('pause', () => {
|
|
|
videoFroms.paused = true;
|
|
@@ -204,12 +235,17 @@ export default defineComponent({
|
|
|
});
|
|
|
|
|
|
videoItem.value.on('canplay', (e: any) => {
|
|
|
+ console.log('canplay', new Date())
|
|
|
+
|
|
|
+ videoFroms.isBuffering = false;
|
|
|
+ clearTimeout(videoFroms.bufferTimeout); // 清除超时检测
|
|
|
// 获取时长
|
|
|
videoFroms.duration = timeFormat(
|
|
|
Math.round(videoItem.value.duration())
|
|
|
);
|
|
|
videoFroms.durationNum = videoItem.value.duration();
|
|
|
emit('canplay');
|
|
|
+
|
|
|
});
|
|
|
|
|
|
// 视频播放异常
|
|
@@ -248,7 +284,7 @@ export default defineComponent({
|
|
|
bufferTimeout = setTimeout(() => {
|
|
|
if (isBuffering) {
|
|
|
// 如果计时器到达且isBuffering仍为true,则认为缓存停止
|
|
|
- console.log('停止缓存数据。');
|
|
|
+ // console.log('停止缓存数据。');
|
|
|
isBuffering = false;
|
|
|
videoFroms.speedInKbps = '';
|
|
|
}
|
|
@@ -402,7 +438,7 @@ export default defineComponent({
|
|
|
setTimeout(() => {
|
|
|
if (isBuffering) {
|
|
|
// 如果计时器到达且isBuffering仍为true,则认为缓存停止
|
|
|
- console.log('停止缓存数据-。');
|
|
|
+ // console.log('停止缓存数据-。');
|
|
|
isBuffering = false;
|
|
|
videoFroms.speedInKbps = '';
|
|
|
}
|
|
@@ -426,7 +462,7 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
const onWaiting = () => {
|
|
|
- console.log('waiting');
|
|
|
+ // console.log('waiting');
|
|
|
isWaiting = true;
|
|
|
let uncachedTime = true; // 没有缓存时间
|
|
|
buffterCatchArray.forEach((item: any) => {
|
|
@@ -448,7 +484,7 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
const onCanplay = () => {
|
|
|
- console.log('canplay');
|
|
|
+ // console.log('canplay');
|
|
|
isWaiting = false;
|
|
|
resetBuffterCatch();
|
|
|
};
|
|
@@ -485,9 +521,11 @@ export default defineComponent({
|
|
|
const currentTime = videoItem.value.currentTime();
|
|
|
videoItem.value.load();
|
|
|
videoItem.value.currentTime(currentTime);
|
|
|
+ console.log('online')
|
|
|
pause();
|
|
|
} else if (val.type === 'offline') {
|
|
|
videoFroms.isOnline = false;
|
|
|
+ console.log('offline')
|
|
|
}
|
|
|
};
|
|
|
onMounted(() => {
|