vue3实现video视频+弹幕评论

vue3实现视频加评论

之前写了一篇博客使用了弹幕插件http://t.csdnimg.cn/616mlvue3 使用弹幕插件，今天对这个页面进行了升级

变成了

vue3使用video

这个没有使用插件，昨天看了好多，没发现有用的插件，下载了几个都没办法使用就用了原生

<video controls class="backgroundImg"><source src="../../assets/image/book.mp4" type="video/mp4" />你的浏览器不支持视频标签。</video>

vue3使用弹幕

弹幕还是用了之前那个文章里面的插件

注意

 1.使用弹幕的时候记得层级关系，弹幕的层级一定是高于视频的，否则视频就会压着弹幕，弹幕显示不出来，所以把弹幕的层级提高就好了，

2.弹幕的范围一定是小于视频的，既然弹幕的层级高了，那么就是压着视频的，如果弹幕的范围和视频的范围一样大或者视频的范围小于弹幕，那么鼠标就触碰不到视频了，所以弹幕的范围一定是小于视频的吗

隐藏弹幕的实现

 之前是通过button来实现隐藏，现在通过switch开关实现，那么就没办法直接调用官方文档的方法，只能曲线调动通过watch监测滑块的开关，来判断是调用哪个方法，但是有个缺点，使用watch,第一次改变值，无法自动调用函数，没发现哪里我写错了，于是我在onMounted的时候自己调用了一次，后面就监视到了，就能调用函数了

onMounted(() => {value1.value = true;
});watch(value1, (newValue, OldValue, onCleanup) => {console.log(newValue);onCleanup(() => {console.log("111111");if (!newValue) {// 如果 newValue 为 falsedanmaku.value.show();} else {danmaku.value.hide();}});
});

控制弹幕速度那里我偷了一个懒，没有改变弹幕的详细速度，滑块的速度改变时假的，弹幕的速度虽然改变了，但是改变的不够精细，我让滑块大于50的时候速度+20，小于50了速度-20，没有实现确切的弹幕速度控制，有人想要写的话，可以帮忙改进一下

watch(speed, (newValue, OldValue, onCleanup) => {onCleanup(() => {if (newValue > 50) {// 如果 newValue 为 falseaddspeeds();} else {jianspeeds();}});
});//弹幕加速
const addspeeds = () => {speeds.value += 20;console.log(speeds.value);
};
//弹幕减速
const jianspeeds = () => {speeds.value -= 20;console.log(speeds.value);
};

页面完整代码

<template><div class="big"><el-card shadow="always"><div><video controls class="backgroundImg"><source src="../../assets/image/book.mp4" type="video/mp4" />你的浏览器不支持视频标签。</video></div><vue-danmakuv-model:danmus="danmus"loopstyle="height: 25rem; width: 78rem;   color: white; /* 白色文字 */  text-shadow:   -1px -1px 0 black,  1px -1px 0 black,  -1px 1px 0 black,  1px 1px 0 black; /* 黑色边缘 */  font-size: 40px; /* 字体大小 */  } "ref="danmaku":speeds="speeds"></vue-danmaku><div class="buts"><el-popover :visible="visible" placement="top-start" :width="200"><span class="demonstration">弹幕速度控制</span><el-slider v-model="speed" /><template #reference><el-icon style="font-size: 28px" @click="hide()"><Setting /></el-icon></template></el-popover></div><div class="left"><el-inputv-model="input"style="width: 200px; margin-right: 10px"placeholder="快来发表你的评论吧"/><el-button round @click="addComment" style="margin-right: 20px">发表</el-button><el-switch v-model="value1" /><br /></div></el-card></div>
</template><script setup>
import vueDanmaku from "vue3-danmaku";
import { ref, onMounted, reactive, watch } from "vue";
import { getComments, postComments } from "../../api/api";const speed = ref(50);
const speeds = ref(150);
//内容
const danmus = ref([]);
const value1 = ref(false);onMounted(() => {getdata();value1.value = true;
});const input = ref("");const visible = ref(false);
//弹幕组件
const danmaku = ref(null);watch(value1, (newValue, OldValue, onCleanup) => {console.log(newValue);onCleanup(() => {console.log("111111");if (!newValue) {// 如果 newValue 为 falsedanmaku.value.show();} else {danmaku.value.hide();}});
});watch(speed, (newValue, OldValue, onCleanup) => {onCleanup(() => {if (newValue > 50) {// 如果 newValue 为 falseaddspeeds();} else {jianspeeds();}});
});
//继续播放弹幕
const dplay = () => {danmaku.value.play();
};
//暂停播放弹幕
const pause = () => {danmaku.value.pause();
};
//显示弹幕
const show = () => {danmaku.value.show();
};
//隐藏弹幕
const hide = () => {visible.value = !visible.value;
};
//弹幕加速
const addspeeds = () => {speeds.value += 20;console.log(speeds.value);
};
//弹幕减速
const jianspeeds = () => {speeds.value -= 20;console.log(speeds.value);
};
const getdata = () => {getComments().then(res => {danmus.value = res.data.map(message => {return message.commentMessage;// 返回每个消息的 commentMessage 属性});console.log(res.data, "111");ElMessage({message: "获取信息成功",type: "success",});}).catch(err => {console.log(err, "err");ElMessage.error("获取信息失败");});
};const addComment = () => {let comment = {commentMessage: input.value,};postComments(comment).then(res => {console.log(res.data, "111");input.value = " ";ElMessage({message: "发布评论成功",type: "success",});}).catch(err => {console.log(err, "err");ElMessage.error("发布失败");});getdata();
};
</script><style scoped>
.big {position: relative;
}
.backgroundImg {position: absolute;height: 30rem;width: 77rem;
}
.buts {position: absolute;right: 50px;margin-top: 95px;
}
.left {margin-top: 95px;
}
</style>