vue3实现video视频+弹幕评论

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

变成了

vue3使用video

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

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

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 为 false
      danmaku.value.show();
    } else {
      danmaku.value.hide();
    }
  });
});

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

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

页面完整代码

 
<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 为 false
      danmaku.value.show();
    } else {
      danmaku.value.hide();
    }
  });
});
 
watch(speed, (newValue, OldValue, onCleanup) => {
  onCleanup(() => {
    if (newValue > 50) {
      // 如果 newValue 为 false
      addspeeds();
    } 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>