vue3实现video视频+弹幕评论

vue3实现视频加评论

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

变成了

vue3使用video

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

javascript 复制代码

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

vue3使用弹幕

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

注意

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

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

隐藏弹幕的实现

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

javascript 复制代码

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，没有实现确切的弹幕速度控制，有人想要写的话，可以帮忙改进一下

javascript 复制代码

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);
};

页面完整代码

javascript 复制代码

<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-danmaku
        v-model:danmus="danmus"
        loop
        style="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-input
          v-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 为 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>