vue中使用西瓜播放器xgplayer （封裝）+xgplayer-hls 播放.m3u8格式視頻

1.西瓜播放器官網

http://h5player.bytedance.com/guide/

2.安裝

# 最新穩定版
$ npm install xgplayer對于已有項目也可以通過 CDN 引入，代碼如下：
<script src="//unpkg.byted-static.com/xgplayer/2.31.2/browser/index.js" type="text/javascript"></script>

3.封裝西瓜播放器組件

<template><div class="video-box"><div ref="playerRef" id="video-player" class="video-player"></div></div></template><script setup>import { ref, onMounted, watch } from 'vue';import Player from 'xgplayer';import 'xgplayer/dist/index.min.css';// 定義propsconst props = defineProps({url: {type: String,default: ''},poster: {type: String,default: ""}});// 定義播放器實例和DOM引用const playerRef = ref(null);const player = ref(null);// 定義emitsconst emit = defineEmits(['triggerEvent', 'timeupdate', 'loadingStateChange', 'playEnd', 'videoClick']);// 判斷是否為Apple設備const isAppleDevice = () => {const ua = navigator.userAgent.toLowerCase();return /iphone|ipad|phone|Mac/i.test(ua);};// 初始化播放器const initPlayer = () => {if (!props.url) return console.warn('url is not exist');const config = {el: playerRef.value, // 使用ref代替idurl: props.url,plugins: [window.HlsPlayer],hls: {retryCount: 3, // 重試 3 次，默認值retryDelay: 1000, // 每次重試間隔 1 秒，默認值loadTimeout: 10000, // 請求超時時間為 10 秒，默認值fetchOptions: {// 該參數會透傳給 fetch，默認值為 undefinedmode: 'cors'}},fluid: true,// 倍速播放playbackRate: [2],defaultPlaybackRate: 1,volume: 0.7,playsinline: isAppleDevice(), // IOS設備設置'x5-video-player-type': 'h5', // 微信內置瀏覽器設置'x5-video-orientation': 'portraint',poster: props.poster,// 畫中畫// pip: true,pipConfig: {bottom: 100,right: 100,width: 320,height: 180},// 初始化首幀// videoInit: true,autoplay: true};// 實例化播放器player.value = new Player(config);if (player.value) {// 新增：單擊事件處理const container = player.value.root;container.addEventListener('click', handleContainerClick);// 注冊事件監聽player.value.on('play', () => {emit('triggerEvent', true);});player.value.on('pause', () => {emit('triggerEvent', false);});player.value.on('ended', () => {emit('playEnd');});// 1. 視頻進入等待緩沖狀態player.value.on('waiting', () => {// console.log('視頻緩沖中...');emit('loadingStateChange', { bool: true, time: player.value.currentTime }); // 通知父組件顯示加載狀態});player.value.on('canplay', () => {emit('loadingStateChange', { bool: false, time: player.value.currentTime });});// 監聽播放進度更新player.value.on('timeupdate', () => {emit('timeupdate', { playerVideo: player.value });});setTimeout(() => {forceVideoSize();}, 100); // 延遲100ms確保播放器完全初始化}};// 生命周期鉤子onMounted(() => {initPlayer();});// 監聽url變化watch(() => props.url, (newValue) => {if (!player.value) {initPlayer();return;}player.value.src = newValue;});// 處理容器點擊事件const handleContainerClick = (e) => {// 排除控制欄區域的點擊if (e.target.closest('.xgplayer-control')) return;emit('videoClick', e); // 通知父組件顯示加載狀態};const forceVideoSize = () => {if (!player.value) return;const videoEl = player.value.root.querySelector('video');const container = player.value.root;if (videoEl) {// 完全重置video標簽的樣式videoEl.style.cssText = `width: 100% !important;height: 100% !important;max-width: none !important;max-height: none !important;object-fit: cover !important;position: absolute !important;top: 0 !important;left: 0 !important;bottom: 0 !important;right: 0 !important;margin: 0 !important;padding: 0 !important;border: none !important;`;// 設置播放器容器樣式container.style.cssText = `width: 100% !important;height: 100% !important;max-width: none !important;max-height: none !important;position: relative !important;overflow: hidden !important;margin: 0 !important;padding: 0 !important;`;}};// 組件卸載時銷毀播放器onUnmounted(() => {if (player.value) {player.value.destroy();player.value = null;}});</script><style scoped lang="scss">.video-box {width: 100% !important;height: 100% !important;.video-player {width: 100% !important;height: 100% !important;padding: 0 !important;margin: 0 auto;}}</style>

3.1 .m3u8 格式處理需要在index.html 中引入

3.2 注意 vite項目下，使用依賴import 的方式播放有問題，需要改為全局引入靜態min.js

  <!-- 先引入 xgplayer 核心庫 -->
<script src="https://unpkg.com/xgplayer@latest/dist/index.min.js"></script> 
<!-- 再引入 xgplayer-hls 插件 -->
<script src="https://unpkg.com/xgplayer-hls@latest/dist/index.min.js"></script>

4.父組件使用

<template><swiper :circular="state.circular" class="m-tiktok-video-swiper" @change="swiperChange"@animationfinish="animationfinish" :current="state.current" :vertical="true" duration="300"><swiper-item v-for="(item, index) in state.originList" :key="index"><view class="swiper-item"v-if="index == state.current || index + 1 == state.current || index - 1 == state.current"><xgplayerVideo  class="m-tiktok-video-player" :url="item.src":poster="poster"v-if="index == state.current && item.src" @playEnd="ended"@loadingStateChange="onwaiting"@triggerEvent="onTriggerEvent"@timeupdate="onTimeupdate"@videoClick="onVideoClick"></xgplayerVideo><slot :item="item"></slot></view></swiper-item></swiper>
</template><script lang="ts" setup>
import { reactive, ref, getCurrentInstance, watch, nextTick } from "vue";
import type { ComponentInternalInstance, PropType } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { getPlayUrl } from "@/api/home";
import { trackEvent } from "@/utils/common";
import xgplayerVideo from "./xgplayerVideo.vue"
const _this = getCurrentInstance() as ComponentInternalInstance;export interface IvideoItem {/*** 視頻鏈接*/src: string;/*** 海報封面*/poster?: string;
}const emits = defineEmits(["change","ended","swiperchange","videoClicks"
]);const props = defineProps({poster: {type: String,default: "",},/*** 當前播放劇集（索引值）*/current: {type: [Number, String],default: 0,},/*** 視頻列表*/videoList: {type: Array as PropType<IvideoItem[]>,default: () => [],},/*** 是否循環播放一個視頻*/loop: {type: Boolean,default: true,},/*** 顯示原生控制欄*/controls: {type: Boolean,default: true,},/*** 是否自動播放*/autoplay: {type: Boolean,default: true,},/*** 是否自動滾動播放*/autoChange: {type: Boolean,default: true,},
});const state = reactive({circular: false,originList: [] as any, // 源數據originIndex: 0, // 記錄源數據的下標current: 0,videoContexts: [] as any,isFirstLoad: true,isPause: true,bufferStartTime:0
});
const VideoPlayer = ref([])
const videoDomDate = ref({})
const reportedTimes = ref(new Set()); // 記錄已上報的時間點const animationfinish = async () => { };function ended() {trackEvent("play", {id: props.videoList[0].videoId,level: props.current,status:'finish'})// 自動切換下一個視頻if (props.autoChange) {state.current = state.originIndex + 1;}emits("ended");
}
/*** 初始一個顯示的swiper數據* @originIndex 從源數據的哪個開始顯示默認0*/
async function initSwiperData(originIndex = state.originIndex) {// 確保索引有效if (originIndex < 0 || originIndex >= state.originList.length) {console.warn("無效的視頻索引:", originIndex);return;}const index = originIndex;// 延遲播放當前視頻，確保DOM已更新await nextTick();console.log("播放視頻:", index, props.videoList[index]);// handleCoverClick(index);// 數據改變emits("change", {index: originIndex,detail: state.originList[originIndex],});}
// 視頻緩沖
const onwaiting = (val) => {// state = true 開始緩沖// state = false 緩沖結束if (val.bool) {state.bufferStartTime = Date.now()trackEvent("play_stop", {id: props.videoList[0].videoId,level: props.current,stop: Number(val.time.toFixed(2)),time:0});} else {if (state.bufferStartTime) {const bufferTime = (Date.now() - state.bufferStartTime) / 1000;trackEvent("play_stop", {id: props.videoList[0].videoId,level: props.current,stop: Number(val.time.toFixed(2)),time:bufferTime});}}}
// 播放暫停
const onTriggerEvent = (boo) => {console.log(boo);
}
// 點擊屏幕
const onVideoClick = (e) => {emits("videoClicks", e);
}// 每隔10秒上報一次
const onTimeupdate = (val) => {if (!val.playerVideo || val.playerVideo.paused) return;const currentTime = Math.floor(val.playerVideo.currentTime);// 視頻總時長const duration = Math.floor(val.playerVideo.duration || 0);// 只處理0秒和10的倍數秒數，且不超過視頻總時長if ((currentTime === 0 || currentTime % 10 === 0) && currentTime <= duration && !reportedTimes.value.has(currentTime)) {if (props.current == 1) {trackEvent("play_progress", {id: props.videoList[0].videoId,level: props.current,progress: currentTime});}reportedTimes.value.add(currentTime);// console.log(`上報: ${currentTime}秒`);}}
// var hls = new Hls();
const handleCoverClick = async(index) => {
// if (Hls.isSupported()) {// 創建新的HLS實例// if (hls) {//     hls.destroy()//  }//           // 暫停視頻（確保沒有播放中的實例）//     if (videoDomDate.value.videoDom) {//         videoDomDate.value.videoDom.pause();//     }//       // 加載.m3u8視頻源//         console.log('HLS媒體已附加',state.originList[index].src,state.current);//         if(state.originList[index].src){//             hls.loadSource(state.originList[index].src); // 假設item.src是.m3u8格式的URL//         }//         // 關聯HLS實例與視頻元素// // 關聯HLS實例與視頻元素//     if (videoDomDate.value.videoDom) {//         hls.attachMedia(videoDomDate.value.videoDom); // 假設DomVideoPlayer暴露了video元素//       }//         console.log('開始進入',videoDomDate.value);//        hls.on(Hls.Events.MEDIA_ATTACHED, () => {//         console.log(videoDomDate.value.videoDom,'，準備播放');//         videoDomDate.value.videoDom.play(); // 開始播放視頻//        });VideoPlayer.value.forEach(item => {console.log(item);if (item) {const num = Number(item.$ownerInstance.$el.getAttribute('data-index'))console.log(num,'99');if (num === index) {item.play()} else {state.isPause = trueitem.toSeek(0)item.pause();}}})
// }
};/*** swiper滑動時候*/
async function swiperChange(event: any) {const { current } = event.detail;state.current = current;state.originIndex = current;// 確保視頻源已加載// if (!state.originList[current].src) {//     const url = await getVideoUrl(props.videoList[current].videoUrl);//     state.originList[current].src = url;// }initSwiperData();emits("swiperchange", current);console.log("swiper切換:", current);
}
async function getVideoUrl(videoUrl: string) {try {if (videoUrl) {const {data: { url },} = await getPlayUrl({videoUrl,});return url;}} catch (error) {console.error("獲取視頻URL失敗:", error);throw error;}
}
// 監聽props.current變化
watch(() => props.current,async () => {console.log(props.current, props.videoList);if (props.videoList?.length) {const i = props.videoList.findIndex((item: any) => item.num == props.current);if (i > -1) {state.current = i;state.originIndex = i;state.originList = props.videoList;const url = await getVideoUrl(props.videoList[i].videoHls);console.log(url, '=============>');state.originList[i].src = url;// 埋點trackEvent("play", {id: props.videoList[0].videoId,level: props.current,status:'start'})// Meta Pixel 用于衡量 Facebook廣告 的效果//#ifdef H5window.fbq('track', 'ViewContent',{content_ids :props.videoList[0].videoId});//#endifif (state.isFirstLoad || !state.videoContexts?.length) {initSwiperData();}}}},{immediate: true,deep: true}
);
function jumpToVideo(index) {if (index >= 0 && index < state.originList.length) {state.current = index;state.originIndex = index;// initSwiperData(index);}
}let loadTimer: any = null;
onLoad(() => {// 為了首次只加載一條視頻（提高首次加載性能），延遲加載后續視頻loadTimer = setTimeout(() => {state.isFirstLoad = false;clearTimeout(loadTimer);}, 5000);
});onUnload(() => {clearTimeout(loadTimer);
});defineExpose({initSwiperData,jumpToVideo,
});
</script><style lang="scss">
.m-tiktok-video-swiper,
.m-tiktok-video-player {width: 100%;height: 100%;background-color: #000;
}.m-tiktok-video-swiper {.swiper-item {width: 100%;height: 100%;position: relative;}.m-tiktok-video-poster {display: block;opacity: 1;visibility: visible;position: absolute;left: 0;top: 0;background-position: center center;background-color: #000;background-size: 100% auto;background-repeat: no-repeat;transition: opacity 0.3s ease, visibility 0.3s ease;pointer-events: none;width: 100%;height: 100%;}.iszan {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;}
}
</style>