快捷導(dǎo)航

vue3使用video.js播放m3u8格式視頻的完整代碼

更新時(shí)間：2025年08月19日 10:57:27 作者：yzhSWJ

M3U8是一種基于HTTP?Live?Streaming?(HLS)的視頻格式,它支持視頻的分段傳輸,非常適合用于網(wǎng)絡(luò)直播和點(diǎn)播服務(wù),這篇文章主要介紹了vue3使用video.js播放m3u8格式視頻的相關(guān)資料,需要的朋友可以參考下面

為什么要將.mp4變成.m3u8

簡單來說，將.mp4格式的視頻轉(zhuǎn)換為.m3u8格式主要有以下三個(gè)原因：

1. **視頻切片**：.m3u8文件是HLS（HTTP Live Streaming）協(xié)議的播放列表文件，它將視頻分割成多個(gè)小的TS片段。這種切片方式使得視頻可以邊下載邊播放，提高了播放效率，尤其適用于網(wǎng)絡(luò)流媒體傳輸。

2. **防盜保護(hù)**：通過將視頻文件分割成多個(gè)片段，并結(jié)合加密技術(shù)，可以更好地保護(hù)視頻內(nèi)容，防止視頻被盜用或非法傳播。

3. **更流暢的播放體驗(yàn)**：HLS協(xié)議可以根據(jù)網(wǎng)絡(luò)狀況動(dòng)態(tài)調(diào)整視頻質(zhì)量，切換不同碼率的視頻流，從而保證播放的流暢性，減少卡頓現(xiàn)象。

此外，.m3u8格式在各種播放器和設(shè)備上具有良好的兼容性，尤其是在蘋果設(shè)備上，HLS是推薦的流媒體格式。同時(shí)，它還支持多語言音軌和多字幕軌的切換，提供更靈活的內(nèi)容呈現(xiàn)方式。

videojs官網(wǎng)：videojs.com/guides/

videojs 中文文檔：https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/index.html

安裝依賴

npm i video.js

npm i videojs-contrib-hls

封裝一個(gè)視頻播放組件

<template>
    <div v-bind="$attrs" class="videoPlayer">
        <video
            class="video-js"
            :id="id"
            style="width: 100%; height: 100%"
            :poster="poster"
        >
            <source v-if="src" :src="src" />
        </video>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, watch, ref } from 'vue'
import 'video.js/dist/video-js.css'
import videojs from 'video.js'

const overrideNative = ref(false)
const props = defineProps({
    id: { type: String, default: 'vd' },
    src: { type: String, default: '' },
    poster: { type: String, default: '' }
})

const emit = defineEmits([
    'videoCanplaythrough',
    'videoPlay',
    'videoPlaying',
    'videoPause'
])

// VideoJs更多選項(xiàng)配置可以參考中文文檔：
// https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/docs/guides/options.html
function options() {
    return {
        html5: {
            hls: {
                overrideNative: overrideNative
            },
            nativeVideoTracks: !overrideNative,
            nativeAudioTracks: !overrideNative,
            nativeTextTracks: !overrideNative
        },
        autoplay: true, // true,瀏覽器準(zhǔn)備好時(shí)開始播放。
        muted: false, // 默認(rèn)情況下將會(huì)消除音頻。
        loop: false, // 導(dǎo)致視頻一結(jié)束就重新開始。
        controls: true,
        preload: 'auto', // auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
        fluid: true, // 當(dāng)true時(shí)，將按比例縮放以適應(yīng)其容器。
        type: 'application/x-mpegURl',
        notSupportedMessage: '此視頻暫無法播放，請稍后再試', // 無法播放媒體源時(shí)顯示的默認(rèn)信息。
        textTrackDisplay: false
    }
}

let player: any

onMounted(() => {
    try {
        player = videojs(props.id, options(), () => {
            videojs.log('播放器已經(jīng)準(zhǔn)備好了!')
            player.pause()
            player.on('canplaythrough', function (event: any) {
                emit('videoCanplaythrough', event.target.player.cache_?.duration)
            })
            player.on('play', function () {
                videojs.log('視頻準(zhǔn)備播放')
                emit('videoPlay')
            })
            player.on('playing', function () {
                videojs.log('視頻已開始播放')
                emit('videoPlaying')
            })
            player.on('pause', function (event: any) {
                emit('videoPause', event.target.player.cache_?.currentTime)
            })
        })
    } catch (error) {
        console.log('catch--->', error)
    }
})

onBeforeUnmount(() => {
    if (player) {
        player.dispose()
    }
})
</script>

<style scoped>
.videoPlayer {
    width: 100%;
    max-width: 800px;
    height: 450px;
    position: relative;
    overflow: hidden;
}

.video-js {
    padding-top: 0 !important;
}
</style>

使用組件

 <!-- 視頻彈窗 -->
        <n-modal v-model:show="showVideoModal" :style="{ width: '800px' }">
            <div class="video-container" style="padding: 0;">
                <VideoPlayer
                    :src="currentVideoSrc"
                    id="videoPlayer"
                    :poster="jboltai"
                />
            </div>
        </n-modal>

import jboltai from '@/assets/jboltai.png';
import VideoPlayer from "./VideoPlayer.vue"

const currentVideoSrc = ref('');

currentVideoSrc.value = "地址";