西瓜视频播放器

官方网址：https://h5player.bytedance.com/

Github：https://github.com/bytedance/xgplayer

xgplayer是一个网络视频播放器库。它基于一切都组件化的原则设计了一个单独的、可拆卸的UI组件。

更重要的是，它摆脱了对视频依赖的视频加载、缓冲和格式支持。

特别是在 mp4 上，它可以分阶段加载，因为它不支持流式传输mp4。这意味着清晰度、负载控制和视频节省可以做到无缝切换。

安装

使用 pnpm 安装：

pnpm install xgplayer

在 .vue 文件中引入：

import Player from "xgplayer";
import "xgplayer/dist/index.min.css";

基本使用

页面提供 video 的占位 DOM：

<div id="mse"></div>

页面首次加载时，初始化播放器：

import { onMounted } from "vue";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";

onMounted(() => {
  let player = new Player({
    id: "mse",
    url: "https://www.apple.com/newsroom/videos/vision-pro-visionos/large_2x.mp4",
    width: "600px",
    height: "300px"
  });
});

组件封装

App.vue

<template>
  <VideoPlayer
    width="600px"
    height="337.5px"
    :id="video.id"
    :video-url="video.url"
    :poster="video.poster"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VideoPlayer from "@/components/VideoPlayer.vue";

const video = ref({
  id: "videoPlayer-mse",
  url: "//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
  poster: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg"
});
</script>

VideoPlayer.vue

<template>
  <div :width="width" :height="height" :id="id">
    <img
      :src="poster"
      alt="视频"
      style="background-color: black"
      v-if="showImage"
      :width="width"
      :height="height"
      @click="play"
    />
  </div>
</template>

<script setup lang="ts" name="VideoPlayer">
import { ref } from "vue";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";

/**
 * @param id 视频播放器挂载的 DOM id，必需
 * @param videoUrl 视频地址
 * @param poster 封面图地址
 * @param width 播放器宽度
 * @param height 播放器高度
 */
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  videoUrl: {
    type: String,
    default: () => ""
  },
  poster: {
    type: String,
    default: () => ""
  },
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "100%"
  }
});

const showImage = ref(true);
let player: Player;

/**
 * @description 播放视频
 */
function play() {
  if (player == null) {
    initPlayer();
    showImage.value = false;
  }
}

/**
 * @description 初始化视频
 */
function initPlayer() {
  player = new Player({
    id: props.id, 					// id
    url: props.videoUrl, 			// 视频地址
    poster: props.poster, 			// 封面地址
    lang: "zh", 					//语言
    volume: 0.5, 					//音量
    width: props.width,
    height: props.height,
    closeVideoClick: false, 		// 单击暂停/播放(默认为false)
    closeVideoDblclick: true, 		// 双击全屏(默认为true)
    cssFullscreen: true, 			// 显示样式全屏(默认为true)
    download: true, 				// 显示下载按钮(默认为false)
    marginControls: false, 			// 控制条样式(false:默认,控制条浮在视频上方, true: 控制条单独显示在视频下方)
    controls: {
      mode: "normal", 				// 控制条模式(normal/flex/bottom)
      autoHide: true 				// 是否自动隐藏(默认为true)
    },
    // 替换控件的图标样式
    // icons: {
    //   startPlay: `<div></div>`,
    //   startPause: `<div></div>`
    // },
    ignores: ["start"],
    commonStyle: {
      progressColor: "", 			// 进度条底色
      playedColor: "#eb161b", 		// 播放完成部分进度条颜色
      cachedColor: "", 				// 缓存部分进度条底色
      sliderBtnStyle: {}, 			// 进度条滑块样式
      volumeColor: "#eb161b" 		// 音量颜色
    },
    screenShot: false, 				// 截图控件
    pip: false, 					// 画中画
    mini: false, 					// 小窗播放
    playbackRate: [2, 1.5, 1, 0.5, 0.25], // 倍速
    inactive: 1500, 				// 播放器focus状态自动消失延迟时长，单位为ms
    leavePlayerTime: 1500, 			// 鼠标移出播放器区域就隐藏时间
    autoplay: true, 				// 是否自动播放
    autoplayMuted: false 			// 是否静音播放
  });

  player.play();
}
</script>