在 Vue 中实现一个复杂的图片/视频播放器，支持多种播放模式、弹幕功能和自定义控制条。

咳咳，各位老铁，早上好中午好晚上好！今天咱们唠唠 Vue 里怎么整出一个花里胡哨的图片/视频播放器，功能要多，样式要酷，代码要优雅。

开场白：播放器的江湖，Vue 来称王！

话说这播放器啊，看似简单，实则内藏玄机。从最简单的 <img> 和 <video> 标签，到各种花式播放模式、弹幕互动、自定义控制条，每一步都考验着咱们的编码功力。今天，咱就用 Vue 这把利器，来闯一闯这播放器的江湖！

第一章：搭好架子，HTML 骨骼要硬朗

首先，咱们得先把 HTML 的骨架搭起来。这里面主要包括：

• 播放器主体： 这是核心，要么是 <img>，要么是 <video>，取决于你要播放的是图片还是视频。
• 控制条： 暂停/播放、进度条、音量控制、全屏按钮等等，都是控制条上的常客。
• 弹幕区域： 用来显示弹幕的容器。
• 其他元素： 根据需要，可以加上封面、加载动画等等。

<template>
  <div class="player-container">
    <!-- 播放器主体 -->
    <video ref="videoPlayer" :src="videoUrl" @timeupdate="handleTimeUpdate" @loadedmetadata="handleLoadedMetadata" @ended="handleVideoEnded"></video>
    <img v-if="isImage" :src="imageUrl" alt="Image" />

    <!-- 弹幕区域 -->
    <div class="danmaku-container">
      <div
        v-for="(danmaku, index) in danmakus"
        :key="index"
        class="danmaku"
        :style="{ top: danmaku.top, color: danmaku.color, fontSize: danmaku.fontSize }"
      >
        {{ danmaku.text }}
      </div>
    </div>

    <!-- 控制条 -->
    <div class="control-bar">
      <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
      <input type="range" min="0" :max="duration" v-model="currentTime" @input="handleSeek" />
      <span>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span>
      <button @click="toggleFullscreen">全屏</button>
      <input type="text" v-model="danmakuText" placeholder="发个弹幕吧！" @keyup.enter="sendDanmaku" />
    </div>
  </div>
</template>

第二章：注入灵魂，JavaScript 代码要风骚

HTML 只是个空壳，要让它动起来，还得靠 JavaScript。在 Vue 里，咱们用 script 标签来写逻辑。

• 数据定义： 定义播放器需要的各种数据，比如视频/图片 URL、播放状态、当前时间、总时长、弹幕列表等等。
• 方法定义： 定义各种操作播放器的方法，比如播放/暂停、跳转、发送弹幕、全屏等等。
• 生命周期钩子： 利用 Vue 的生命周期钩子，在组件加载时进行初始化，比如获取视频时长。

<script>
export default {
  data() {
    return {
      videoUrl: '你的视频地址.mp4', // 视频地址
      imageUrl: '你的图片地址.jpg', // 图片地址
      isImage: false, // 是否是图片
      isPlaying: false, // 播放状态
      currentTime: 0, // 当前播放时间
      duration: 0, // 总时长
      danmakus: [], // 弹幕列表
      danmakuText: '', // 弹幕输入框内容
      videoPlayer: null, // video 元素引用
    };
  },
  mounted() {
    this.videoPlayer = this.$refs.videoPlayer;
    if(this.videoUrl === ''){
        this.isImage = true;
    }
  },
  methods: {
    togglePlay() {
      if (this.isPlaying) {
        this.videoPlayer.pause();
      } else {
        this.videoPlayer.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    handleTimeUpdate() {
      this.currentTime = this.videoPlayer.currentTime;
    },
    handleLoadedMetadata() {
      this.duration = this.videoPlayer.duration;
    },
    handleSeek() {
      this.videoPlayer.currentTime = this.currentTime;
    },
    toggleFullscreen() {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        this.$el.requestFullscreen();
      }
    },
    sendDanmaku() {
      if (this.danmakuText.trim() === '') return;

      const danmaku = {
        text: this.danmakuText,
        top: Math.random() * 80 + '%', // 随机 top 值，避免重叠
        color: this.getRandomColor(), // 随机颜色
        fontSize: Math.random() * 20 + 16 + 'px', // 随机字体大小
      };
      this.danmakus.push(danmaku);
      this.danmakuText = '';

      // 定时删除弹幕，模拟弹幕消失
      setTimeout(() => {
        this.danmakus.shift();
      }, 5000); // 5秒后消失
    },
    formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${this.padZero(minutes)}:${this.padZero(seconds)}`;
    },
    padZero(num) {
      return num < 10 ? '0' + num : num;
    },
    getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },
    handleVideoEnded(){
        this.isPlaying = false;
    }
  },
};
</script>

第三章：精雕细琢，CSS 样式要亮眼

有了 HTML 和 JavaScript，播放器已经能跑起来了。但是，要想让它看起来更舒服，更符合咱们的审美，还得靠 CSS 来美化。

• 布局： 使用 Flexbox 或 Grid 布局，让各个元素排列整齐。
• 样式： 设置字体、颜色、边距、背景等等，让播放器看起来更漂亮。
• 动画： 添加一些过渡动画，让播放器的交互更自然。

<style scoped>
.player-container {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

video, img {
  width: 100%;
  height: auto;
  display: block; /* 移除图片底部的间隙 */
}

.danmaku-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 穿透点击事件，让控制条可以操作 */
  overflow: hidden;
}

.danmaku {
  position: absolute;
  white-space: nowrap;
  animation: danmakuMove 10s linear forwards;
  text-shadow: 1px 1px 2px black; /* 弹幕阴影 */
}

@keyframes danmakuMove {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.control-bar {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.control-bar button {
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.control-bar input[type="range"] {
  width: 50%;
  -webkit-appearance: none; /* 移除默认样式 */
  height: 5px;
  background: #ddd;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.control-bar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: #4CAF50;
  cursor: pointer;
  border-radius: 50%;
}

.control-bar input[type="text"] {
  padding: 5px;
  border: none;
  border-radius: 5px;
  outline: none;
}
</style>

第四章：进阶之路，更多花样等你来

上面的代码只是一个基础的播放器，要想让它更牛逼，还有很多可以扩展的地方：

• 多种播放模式： 比如循环播放、自动播放、列表播放等等。
• 清晰度切换： 支持不同清晰度的视频源，让用户根据网络情况选择。
• 倍速播放： 允许用户调整播放速度。
• 弹幕管理： 增加弹幕屏蔽、弹幕发送者信息显示等功能。
• 自定义控制条： 完全自定义控制条的样式和功能。
• 错误处理： 完善错误处理机制，当视频加载失败或播放出错时，给出友好的提示。

表格：播放器功能对比

功能	基础播放器	进阶播放器
播放/暂停	√	√
进度条	√	√
音量控制		√
全屏	√	√
弹幕	√	√
循环播放		√
自动播放		√
清晰度切换		√
倍速播放		√
弹幕管理		√

第五章：优化细节，提升用户体验

除了功能之外，用户体验也是非常重要的。以下是一些可以优化的地方：

• 加载优化： 使用懒加载技术，只加载当前需要的资源。
• 性能优化： 避免不必要的计算和渲染，提高播放器的流畅度。
• 响应式设计： 让播放器在不同设备上都能良好显示。
• 无障碍访问： 考虑视力障碍用户的需求，提供无障碍访问支持。

第六章：实战演练，让代码飞起来

光说不练假把式，现在咱们来撸一些代码，实现一些进阶功能。

1. 清晰度切换

首先，在 data 中定义清晰度选项和当前清晰度：

data() {
  return {
    // ... 其他数据
    videoSources: [ // 视频源列表
      { label: '标清', url: '你的标清视频地址.mp4' },
      { label: '高清', url: '你的高清视频地址.mp4' },
      { label: '超清', url: '你的超清视频地址.mp4' },
    ],
    currentSource: '你的标清视频地址.mp4', // 当前视频源
  };
},

然后，在 template 中添加清晰度选择器：

<template>
  <div class="player-container">
    <!-- 播放器主体 -->
    <video ref="videoPlayer" :src="currentSource" @timeupdate="handleTimeUpdate" @loadedmetadata="handleLoadedMetadata"></video>

    <!-- 清晰度选择器 -->
    <select v-model="currentSource" @change="handleSourceChange">
      <option v-for="source in videoSources" :key="source.url" :value="source.url">{{ source.label }}</option>
    </select>

    <!-- ... 其他元素 -->
  </div>
</template>

最后，在 methods 中定义 handleSourceChange 方法：

methods: {
  // ... 其他方法
  handleSourceChange() {
    this.videoPlayer.load(); // 重新加载视频
    this.isPlaying ? this.videoPlayer.play() : this.videoPlayer.pause(); // 保持播放状态
  },
},

2. 倍速播放

首先，在 data 中定义倍速选项和当前倍速：

data() {
  return {
    // ... 其他数据
    playbackRates: [0.5, 1, 1.5, 2], // 倍速选项
    currentRate: 1, // 当前倍速
  };
},

然后，在 template 中添加倍速选择器：

<template>
  <div class="player-container">
    <!-- 播放器主体 -->
    <video ref="videoPlayer" :src="currentSource" @timeupdate="handleTimeUpdate" @loadedmetadata="handleLoadedMetadata"></video>

    <!-- 倍速选择器 -->
    <select v-model="currentRate" @change="handleRateChange">
      <option v-for="rate in playbackRates" :key="rate" :value="rate">{{ rate }}x</option>
    </select>

    <!-- ... 其他元素 -->
  </div>
</template>

最后，在 methods 中定义 handleRateChange 方法：

methods: {
  // ... 其他方法
  handleRateChange() {
    this.videoPlayer.playbackRate = this.currentRate; // 设置播放速度
  },
},

第七章：总结与展望

今天咱们从零开始，用 Vue 撸了一个功能丰富的图片/视频播放器。虽然代码还比较基础，但已经具备了核心功能和可扩展性。

希望通过今天的分享，大家能够对 Vue 开发播放器有一个更深入的了解。记住，编程的路上没有终点，只有不断学习和实践，才能成为真正的技术大牛！

下课！