Vue中video播放m3u8视频_hlsjsplayer-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangningga/article/details/127673795

本文介绍如何使用xgplayer-hls播放m3u8格式的视频，包括安装依赖包、配置播放器参数等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，安装依赖包

npm install --save xgplayer

npm install --save xgplayer-hls

2，贴代码吧

<template>
  <div>
    <div id='mse'></div>
  </div>
</template>

<script>
import HlsJsPlayer from "xgplayer-hls"

export default {
  data(){
    return{
      video:''
    }
  },
  mounted(){
    this.initPlayer()
  },
  methods:{
    initPlayer() {
      this.video = new HlsJsPlayer({
          id: 'mse',
          url: '你的m3u8视频链接',
          lastPlayTime: 0,
          // lastPlayTime: 20, //视频起播时间（单位：秒）
          lastPlayTimeHideDelay: 3, // 提示文字展示时长（单位：秒）
          playbackRate: [0.5, 0.75, 1, 1.25, 1.5, 2], // 传入倍速可选数组
          controlPlugins: [],
          autoplay: true,
          volume: 20,
          autoplayMuted: false, // 这个配置，导致不自动播放，需要用户点击
          width: 790,
          height: 446,
          // closeInactive: true,
          definitionActive: 'click',
          errorTips: `这里是错误提示，可以写行内样式`,
          loop: false
        })
    },
  }
}
</script>

<style>

</style>

注意，m3u8格式是只能用一次，再次使用链接会失效，可以重新获取一下m3u8的链接